Reactでマッピングすると予期しないトークンが発生する

Question

select要素をレンダリングしているので、keyValuesを自分のコンポーネントに渡す必要があります。

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

しかし、結果として、私はエラーを取得しUnexpected token, expected ;：keyValuesを収集するために、私はこの方法で、実際のオブジェクトの値をマッピングします。エラーはvalueを指します。私は何が欠けていますか？

Answer 1

これは{}がブロックとして扱われるため、あなたのコードは、コロンと値の識別子がどこにもありません。これはオブジェクトリテラルの外側では明らかに無効なので、エラーです。

矢印関数は特定の構文に従っているからです。 ECMAScript 2015 Specificationパー：

14.2アロー機能あなたが見ることができるように、矢印機能は簡潔なボディを可能

ArrowFunction : 
    ArrowParameters [no LineTerminator here] => ConciseBody 

ConciseBody : 
    [lookahead ≠ { ] AssignmentExpression 
    { FunctionBody } 

構文であってもよく、定義
関数本体でブロックします。

中括弧を使用するオブジェクトリテラルを返そうとしているため、ブロックに対して混乱し、プロパティ名と値も関数本体について混乱します。

は、この問題を解決返されるオブジェクトのためのカッコ内のオブジェクトリテラルをラップするには、次の式だけはカッコ内にできるため

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

この作品理由があります。構文

12.2一次式

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

ブロックは式ではないので、それは括弧内にはできませんので、{}が想定されていますspecification againあたりオブジェクトが返されます（オブジェクトは式です）。あなたの例では

---

^{、keyはlabelとして扱われます。コード行は式（client.Name）であるため、セミコロンで終了する必要があります。代わりにコンマがあるので、セミコロンが期待されていたがカンマが付いているというエラーがスローされます。}