迭代对象数组显示语法错误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)。所以错误恰恰就在此时。

Answer 1

你只需要用花括号

包装你的js代码

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

Answer 2

如果要在HTML中使用变量的值，请输入花括号。

大括号是一种特殊的语法，让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>
  );
};