在React中映射时出现意外的令牌

Question

我正在渲染一个select元素，我需要将keyValues传递给我的组件。要收集keyValues，我会以这种方式映射真实对象的值：

 <Field keyValues={clients.map(client => {
     key: client.Name,
     value: client.Id 
})} />

但结果我收到错误Unexpected token, expected ;。错误指向value。我错过了什么？

Answer 1

这是因为{}被视为一个块，所以你的代码只是冒号中带有冒号和值的标识符...这在对象文字之外显然是无效的，因此是错误。< SUP> 1

之所以如此，是因为箭头函数遵循某种语法。根据{{​​3}}：

  

14.2箭头功能定义

     

<强>语法

ArrowFunction :
  ArrowParameters [no LineTerminator here] => ConciseBody

ConciseBody :
  [lookahead ≠ { ] AssignmentExpression
  { FunctionBody }

正如您所看到的，箭头功能允许使用简洁的主体，这可能是具有功能主体的块。

因为你试图返回碰巧使用花括号的对象文字，所以它对于一个块很困惑，你的属性名称和值也会混淆为函数体。

要解决此问题，请将对象文字包装在括号中，以便返回要返回的对象：

<Field keyValues={clients.map(client => ({
    key: client.Name,
    value: client.Id 
}))} />

这之所以有效，是因为只有表达式可以在括号中。根据{{​​3}}：

  

12.2初级表达

     

<强>语法

CoverParenthesizedExpressionAndArrowParameterList :
  ( Expression )
  ( )
  ( ... BindingIdentifier )
  ( Expression , ... BindingIdentifier )

由于块不是表达式，因此它不能在括号内，因此假定{}是一个对象，因此返回一个对象（一个对象是一个表达式）。

^{1 在您的示例中，key被视为ECMAScript 2015 Specification。由于您的代码行是表达式（client.Name），因此必须以分号结束。因为有一个逗号代替，所以会抛出错误，报告分号是预期的但是得到了逗号。}