React运行报错TypeError: tableData.map is not a function原因咨询

根本原因 #

报错本质是渲染阶段tableData变量不是数组类型，不具备数组原型上的map方法，问题出在useEffect内的fetch数据处理逻辑：

• fetch请求返回的response对象调用json()方法后，返回的是Promise实例，并非直接解析后的接口响应数据。代码中直接将该Promise传入updateTableData，覆盖了初始的数组默认值，导致tableData变为Promise类型，调用map自然触发类型错误。

为什么useEffect内执行map可以正常运行 #

你在useEffect内调用map时，是等待了response.json()的Promise状态变为resolved，拿到了真实的接口返回数据后才执行的操作：只要此时接口返回的是数组类型，map就可以正常执行。

额外可能触发该问题的场景 #

就算补全了Promise等待逻辑，如果你的接口返回的结构不是纯数组，而是{ "code": 0, "result": [...] }这类嵌套结构，直接把整个响应对象赋值给tableData，也会导致变量不是数组，触发同样报错。

修复参考代码 #

import { useState, useEffect } from "react";

export default function RenderTable(){
    const [tableData, updateTableData] = useState([{id: 1, name: "name", price: 200, size: "size"}]);

    useEffect(()=>{
        fetch("/api/ManageSite")
          // 等待json解析完成，拿到真实响应数据
          .then(response => response.json())
          .then(res => {
            // 按实际接口结构取数组字段，同时加类型校验兜底
            updateTableData(Array.isArray(res) ? res : [])
          })
    }, []);

    return(
        <table>
            <tbody>
                {/* 渲染阶段加可选链兜底，避免非数组场景报错 */}
                {tableData?.map(value =>
                    <tr key={value.id}>
                        <td>{value.name}</td>
                        <td>{value.price}</td>
                        <td>{value.size}</td>
                    </tr>
                )}
            </tbody>
        </table>
    )
}

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