如何从Express.js获取JSON数据并通过React的map()方法渲染列表

错误根因 #

组件首次渲染时，useEffect中的异步接口请求还未返回，此时data为初始化赋值的空对象{}，data.list取值为undefined，调用undefined.map会直接抛出类型错误。

可行解决方案 #

你可以任选以下任意一种方案修复：

• 方案1：给state设置符合结构的初始值
  修改useState初始化逻辑，保证首次渲染时data.list为可遍历的空数组：

const [data, setData] = useState({
  list: []
})

• 方案2：使用可选链做非空兜底
  在渲染调用map前通过可选链?.做短路校验，属性不存在时不会执行后续逻辑：

import { useState, useEffect } from 'react'
  
function App() {
  const [data, setData] = useState({})
  useEffect(() => {
    fetch("/home")
    .then(res => res.json())
    .then(data => setData(data))
  }, [])
  return (
    <div>
        {data?.list?.map(function(d, idx){
         return (<li key={idx}>{d.name}</li>)
       })}
    </div>
  );
}
export default App;

• 方案3：增加数组类型判断的条件渲染
  先判断data.list是数组再执行遍历，避免非预期类型导致的报错：

return (
  <div>
      {Array.isArray(data.list) && data.list.map(function(d, idx){
       return (<li key={idx}>{d.name}</li>)
     })}
  </div>
);

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