개체 배열을 반복하여 구문 오류를 표시합니다. reactjs

Question

개체 배열을 기준으로 정렬되지 않은 목록 요소를 렌더링합니다. 내 목록 배열은 this.state 안에 있습니다.

this.state = { 
     cards: [{name: "card1", id: 1}, {name: "card2", id: 2}, {name: "card3", id: 3}] 
    }; 

render()을 사용하면 목록 요소를 나열합니다.

render() { 
    return (<ul> 
     this.state.cards.map((card) => { 
      return <li>{card.name}</li> 
     }); 
     </ul> 
    ) 
    } 

Uncaught Error: Module build failed: SyntaxError: Cards.js: Unexpected token (26:41). 따라서 오류는이 시점에서 정확하게 발생합니다. 당신이 HTML 내부 변수의 값을 사용하고자 할 때

Answer 1

당신은 중괄호

render() { 
    return (
    <ul> 
     {this.state.cards.map((card) => { 
     return <li>{card.name}</li> 
     })} 
    </ul> 
); 
} 

Answer 2

에 JS 코드를 래핑하는 중괄호을 넣어해야합니다.

중괄호

는 JSX 파서를 할 수있는 특수 구문입니다 그것을 대신 문자열의 JavaScript로 사이에있는 내용을 해석 할 필요가 있음을 알고있다. 이 같은 귀하의 경우에는

:

render() { 
    return ( 
     <ul> 
     {this.state.cards.map(card => <li>{card.name}</li>)} 
     </ul> 
    ); 
} 

내 방식 :

이

render =() => { 
    const { cards } = this.state; // Destructuring assignment 
    const cardsDraw = cards.map(x => <li key={x.id}>{x.name}</li>); 
return (
    <ul> 
    {cardsDraw} 
    </ul> 
); 
};