React使用forEach遍历数组无法渲染HTML元素如何解决？

问题根因 #

• Array.forEach 执行后没有返回值，最终返回undefined，所以JSX中这段逻辑没有任何内容可供React渲染，是功能失效的核心原因。
• 父组件中text状态的初始值为空字符串，首次渲染时props.content不是数组类型，直接调用数组方法会触发类型报错，需要兼容边界情况。

修复方案 #

使用Array.map替代forEach，map会遍历数组并返回新的JSX元素数组，可直接被React渲染，同时补充唯一key属性、兼容非数组的边界情况即可。

修正后的Memes组件代码 #

import classes from "./Memes.module.css";
const Memes = (props) => {
  return (
    <div className={classes.memes__body}>
      {Array.isArray(props.content) && props.content.map((item, index) => (
        <h1 key={index}>{item}</h1>
      ))}
    </div> 
  );
}

export default Memes;

可选优化（推荐） #

将父组件Fetch_memes.js中text的初始值修改为空数组，避免类型不一致导致的潜在问题：

// 替换原有的 const [text, setText] = useState("");
const [text, setText] = useState([]);

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