React中使用.map渲染数据时提示user.map is not a function报错如何解决

报错原因 #

map是数组专属的实例方法，出现user.map is not a function错误，本质是你调用map方法时，user变量的类型不是数组。

具体排查与解决方法 #

1. 确认后端接口返回的数据结构 #

你初始化user状态时给的默认值是数组，但/Donate接口返回的响应大概率不是数组类型，常见的两种场景：

• 后端返回的是封装后的结构，例如{code: 200, data: [用户数组], msg: "success"}，你直接把整个响应体赋值给user，覆盖了原来的数组类型
• 后端直接返回了单个用户对象，而非数组

你可以在赋值前先打印确认响应结构：

useEffect(() => {
    fetch("/Donate").then(res=>{
        if(res.ok){
            return res.json();
        }
    }).then(jsonRes=>{
        // 打印确认返回内容、类型、是否为数组
        console.log('接口返回内容：', jsonRes, typeof jsonRes, Array.isArray(jsonRes))
        setUser(jsonRes)
    });
},[])

根据打印结果调整赋值逻辑：

• 如果是嵌套结构，取对应的数组字段赋值即可，例如setUser(jsonRes.data)
• 如果是单个用户对象，包裹成数组再赋值：setUser([jsonRes])

2. 补充异常场景处理 #

你当前的逻辑没有处理接口请求失败、res.ok为false的场景，这种情况下jsonRes会是undefined，赋值给user也会触发报错，补充错误和边界处理即可：

useEffect(() => {
    fetch("/Donate")
    .then(res=>{
        if(res.ok){
            return res.json();
        }
        throw new Error('接口请求异常')
    })
    .then(jsonRes=>{
        // 确认是数组再赋值，不符合预期就兜底为空数组
        if(Array.isArray(jsonRes)){
            setUser(jsonRes)
        } else {
            setUser([])
            console.error('接口返回不是数组：', jsonRes)
        }
    })
    .catch(err=>{
        console.error('请求出错：', err)
        setUser([])
    })
},[])

3. 渲染前加类型判断兜底 #

调用map前先判断user是否为数组，从渲染侧彻底规避该报错，同时注意遍历元素需要加key属性避免React警告，遍历参数不要和外层user重名避免作用域混淆：

// 写法1：短路判断，只有是数组时才执行map
Array.isArray(user) && user.map((userItem, index) => <>
         <h1 key={index}> {userItem.name} </h1>
         <h1> {userItem.address} </h1>
     </>)

// 写法2：兜底空数组
(user || []).map((userItem, index) => <>
         <h1 key={index}> {userItem.name} </h1>
         <h1> {userItem.address} </h1>
     </>)

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