在 React 中映射时出现意外标记

Question

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

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

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

Answer 1

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

之所以这样，是因为箭头函数遵循一定的语法。根据 ECMAScript 2015 Specification:

14.2 Arrow Function Definitions

Syntax

ArrowFunction :
  ArrowParameters [no LineTerminator here] => ConciseBody

ConciseBody :
  [lookahead ≠ { ] AssignmentExpression
  { FunctionBody }

如你所见，箭头函数允许一个简洁的函数体，它可以是一个带有函数体的块。

因为您正在尝试 return 一个碰巧使用大括号的对象文字，所以它被混淆为一个块，并且您的属性名称和值也被混淆为函数体。

要解决此问题，请将要 returned 的对象的对象字面量括在括号中：

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

之所以可行，是因为括号中只能是表达式。根据 specification again:

12.2 Primary Expression

Syntax

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

由于块不是表达式，它不能放在括号内，所以 {} 被假定为一个对象，因此一个对象被 returned（一个对象是一个表达式） .

^{¹ 在您的示例中，key 被视为 label。由于您的代码行是一个表达式 (client.Name)，因此它必须以分号结尾。因为有一个逗号，所以会抛出错误，报告分号是预期的，但得到了逗号。}

Unexpected token when mapping in React