ReactJS中使用数组数据时forEach方法失效问题排查

你的问题核心出在用forEach生成JSX元素上——forEach的设计只是遍历数组执行回调逻辑，它不会返回任何值（最终返回undefined），而React在JSX中需要接收可渲染的元素数组，所以这段代码相当于在渲染undefined，自然看不到任何段落内容。

解决方法很简单，把forEach换成map方法：map会遍历数组，将每个元素经过回调处理后的结果收集成新数组，这个数组正好能被React正常渲染。

另外，React要求列表中的每个元素都要有唯一的key属性，这里可以用数组索引作为key（对于静态数组来说是安全的选择）。

修改后的代码如下：

{ paraContent.map((element, index) => {
  return (<p key={index} className="about-paragraph">{element}</p>)
}) }

也可以用更简洁的箭头函数写法：

{ paraContent.map((element, index) => (
  <p key={index} className="about-paragraph">{element}</p>
)) }

为什么forEach不行？ #

• forEach的返回值始终是undefined，所以你写的{ paraContent.forEach(...) }等价于渲染{undefined}，React会直接忽略这个值。
• map会返回一个新数组，数组里是每次回调返回的<p>元素，React可以逐个渲染这些元素。

这样修改后，你的三个段落就能正常显示啦！

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