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

我正在渲染一个select元素，需要将

keyValues

传递给我的组件。为了收集

keyValues

，我通过以下方式映射真实对象的值：

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

{
键：client.Name，
值：client.Id
})} />

---

但结果是，我得到了一个错误

意外标记，这是意料之中的。错误指向
值
。我错过了什么？
 这是因为<代码> {} /代码>被视为块，所以您的代码只是带有冒号和标识符的标识符，在无处…这在对象文本之外显然是无效的，因此会出现错误。1

原因是箭头函数遵循某种语法。根据：

14.2箭头函数定义

语法

ArrowFunction :
  ArrowParameters [no LineTerminator here] => ConciseBody

ConciseBody :
  [lookahead ≠ { ] AssignmentExpression
  { FunctionBody }

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

正如您所看到的，arrow函数允许一个简洁的主体，它可能是一个带有函数主体的块

因为您正试图返回一个恰好使用大括号的对象文字，所以它对于块和函数体的属性名和值都是混淆的

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

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

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


1在您的示例中，
键
被视为。由于代码行是表达式（
client.Name
），因此必须以分号结尾。因为有一个逗号替代，错误被抛出，报告一个分号，但是得到逗号。
 这是因为<代码> {} /COD>被视为一个块，所以您的代码只是带有冒号和标识符的标识符，在无处…这在对象文本之外显然是无效的，因此会出现错误。1

原因是箭头函数遵循某种语法。根据：

14.2箭头函数定义

语法

ArrowFunction :
  ArrowParameters [no LineTerminator here] => ConciseBody

ConciseBody :
  [lookahead ≠ { ] AssignmentExpression
  { FunctionBody }

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

正如您所看到的，arrow函数允许一个简洁的主体，它可能是一个带有函数主体的块

因为您正试图返回一个恰好使用大括号的对象文字，所以它对于块和函数体的属性名和值都是混淆的

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

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

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


1在您的示例中，
键
被视为。由于代码行是表达式（
client.Name
），因此必须以分号结尾。由于改为逗号，因此会抛出错误，报告应使用分号，但得到了逗号。
谢谢！我知道这很简单。需要阅读JSX的基础知识。@Idsa哦，不，这不是JSX的错，而是箭头函数的错。巴贝尔：）谢谢！我知道这很简单。需要阅读JSX的基础知识。@Idsa哦，不，这不是JSX的错，而是箭头函数的错。巴贝尔：）