在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箭函數定義

語法

ArrowFunction : 
    ArrowParameters [no LineTerminator here] => ConciseBody 

ConciseBody : 
    [lookahead ≠ { ] AssignmentExpression 
    { FunctionBody } 

正如你所看到的，箭頭功能允許簡潔的身體，這可能是一個用函數體進行阻塞。

因爲您試圖返回恰好使用花括號的對象字面量，所以它對塊有困惑，並且您的屬性名稱和值也會與函數體發生混淆。

爲了解決這個問題，包裹對象括號中的文字爲對象返回：

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

之所以這工作是因爲只有表達式可以在括號中。每specification again：

12.2初步表達

語法

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

由於塊不是一個表達式，它不能在括號內，所以假設{}成爲一個對象，因此返回一個對象（一個對象是一個表達式）。

---

^{在您的例子，key被視爲label。由於您的代碼行是表達式（client.Name），因此它必須以分號結尾。由於有一個逗號代替，所以拋出錯誤報告了分號，但是得到了逗號。}