React中用forEach()替代map()失效问题求助

问题背景 #

原本使用map()可以正常渲染车辆列表的React代码，替换为forEach()时：

1. 直接在JSX表达式内写回调函数会触发Unexpected token语法错误
2. 将回调移到return外部后无报错，但车辆列表完全不显示，仅渲染标题

错误原因分析 #

1. 语法错误的原因 #

JSX中的{}只能容纳表达式（能返回值的代码片段），而你在{}内部直接声明function myFunction()属于语句，不符合JSX的语法规则，因此触发语法错误。

2. 列表不渲染的原因 #

forEach()方法的设计是遍历数组执行回调，没有返回值（始终返回undefined）。React渲染undefined时不会生成任何DOM元素，所以列表区域是空的；而map()会返回一个新数组，数组内是生成的<li>元素，React可以直接渲染这个数组。

解决办法 #

办法1：如果一定要用forEach渲染 #

先创建空数组存储生成的JSX元素，在forEach遍历中把元素push进去，最后渲染这个数组：

function Garage() {
  const cars = ['Ford', 'BMW', 'Audi'];
  // 创建空数组存列表元素
  const carItems = [];
  cars.forEach((car) => {
    carItems.push(<li key={car}>I am a {car}</li>);
  });
  return (
    <>
      <h1>Who lives in my garage?</h1>
      <ul>
        {carItems}
      </ul>
    </>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Garage />);

注意：给列表元素加上唯一key属性，这是React渲染列表的最佳实践，避免性能问题和警告。

办法2：继续使用map（推荐） #

map()是React渲染列表的标准方式，写法更简洁，符合函数式编程风格，官方也推荐使用：

function Garage() {
  const cars = ['Ford', 'BMW', 'Audi'];
  return (
    <>
      <h1>Who lives in my garage?</h1>
      <ul>
        {cars.map((car) => <li key={car}>I am a {car}</li>)}
      </ul>
    </>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Garage />);

内容的提问来源于stack exchange，提问作者Matt Perry