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)이므로 세미콜론으로 끝나야합니다. 대신에 쉼표가 있기 때문에 세미콜론이 필요하지만 쉼표가 있다고보고하면 오류가 발생합니다.