React使用useEffect时报Cannot read property 'map' of undefined问题

• 你给locs的初始值是空数组[]，首次渲染时fetch请求还没有完成返回数据，这时候直接读取数组的data属性自然是undefined，调用map方法就会抛出错误。
• 等异步请求完成执行setLocs(data)后，locs才会被赋值为接口返回的、带data字段的对象，此时才能正常访问locs.data。

方案1：修正初始值结构 #

匹配你接口返回的结构，给locs设置符合预期的初始值，保证首次渲染时locs.data是可调用map的数组：

// 把初始值从 [] 改为 {data: []}
let [locs, setLocs] = useState({data: []})

方案2：使用可选链做安全调用 #

不需要改初始值，在调用map前加可选链操作符，属性为undefined时会终止执行不会报错：

{locs.data?.map(loc => (
    console.log(loc)
))}

方案3：加条件渲染判断 #

只有确认locs.data存在时才执行遍历逻辑：

{locs.data && locs.data.map(loc => (
    console.log(loc)
))}

如果接口返回的响应本身就是数组，并没有嵌套在data字段里，那你需要同时修改赋值逻辑和遍历逻辑：

// 请求成功后直接把数组赋值
.then((data) => setLocs(data))

// 直接遍历locs，不需要加.data
{locs.map(loc => (
    console.log(loc)
))}

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