React遍历数据时报Cannot read property 'map' of undefined如何解决

• 初始状态未赋值：你声明data状态时useState()没有传初始值，导致data的初始值为undefined。组件首次渲染时接口请求还未完成，会直接执行data.map操作，undefined没有map方法，直接抛出错误。
• map回调返回值错误：你当前map的回调函数使用了大括号包裹逻辑，但没有写return语句，即使后续接口请求成功，也无法渲染出对应的节点内容。
• 接口返回结构不匹配：如果你的接口返回的是带外层包装的对象（如{code:200, result: 数组}）而非直接返回数组，赋值给data的内容也会不符合预期。

1. 给状态设置初始空数组
   把const [data, setData] = useState();修改为const [data, setData] = useState([]);，空数组调用map方法不会报错，首次渲染无内容也不会抛出异常。

2. 增加渲染兜底逻辑，同时修正map的返回写法
   使用可选链运算符?.做兼容，避免后续接口返回异常时再次出现同类错误，同时补充React要求的key属性和返回逻辑：

return (
  <div>
    {/* 可选链兜底 + 隐式返回写法，也可以用大括号加显式return */}
    {data?.map((items) => (
      <div key={items.id}>{items.topic}</div>
    ))}
  </div>
);

3. 确认接口返回结构
   如果接口返回的数组不是直接在res根层级，需要调整赋值逻辑，比如接口返回{data: 数组}的话，修改赋值语句为setData(res.data)。

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