Javascript 遍历对象数组显示语法错误

我正在基于对象数组呈现无序列表元素。这是我在这个.state中的列表数组返回

使用render，我将列出列表元素

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

---

未捕获错误：模块生成失败：SyntaxError:Cards.js:意外令牌26:41。因此，错误就在这里。

您只需要将js代码用大括号括起来

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

---

您只需要将js代码用大括号括起来

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

如果要在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>
  );
};

如果要在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>
  );
};

---

有趣的是，当代码段使用correct=>符号时，错误快照显示您正在使用->符号作为箭头函数。有趣的是，当代码段使用correct=>符号时，错误快照显示您正在使用->符号作为箭头函数