React中state变量数组内容无法在div渲染，forEach循环失效是什么原因？

为什么forEach无法正常渲染 #

forEach 方法仅执行遍历操作，没有返回值，遍历结束后返回 undefined，React 无法对 undefined 做内容渲染，因此页面不会出现你预期的消息列表。

正确的列表渲染写法 #

React 中渲染列表需要用 map 方法，map 会遍历数组并返回包含JSX节点的新数组，React可以正常识别并渲染这个数组的内容：

{messagesList.map((message, index) => (
  // 列表渲染需要为每个节点绑定唯一key属性，若message无重复可直接用message作为key
  <div key={index}>{message}</div>
))}

额外注意事项 #

如果替换为map后仍然没有渲染内容，可以检查两个常见问题：

• messagesList 是否是通过 useState/useReducer 声明的响应式状态，直接修改普通JS变量不会触发组件重渲染，页面自然不会更新
• 你使用的定时器需要在组件卸载时清除，避免内存泄漏，参考写法：

useEffect(() => {
  const timer = setInterval(() => {
    const now = new Date();
    messageBox.current.addMsg(`${now.getHours()}:${now.getMinutes()}:${now.getSeconds()}`);
  }, 10000);
  // 卸载时清除定时器
  return () => clearInterval(timer);
}, []);

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