React渲染Table展示后端数据时map is not a function报错如何解决

错误根因 #

comm.map is not a function报错的核心原因是调用map方法的comm变量不是数组类型：

• 你通过useState给comm设置的初始值为单个评论对象，而map是仅数组类型具备的内置方法，对象调用该方法就会触发报错
• 需额外确认后端接口http://localhost:4000/getcomment/${id}返回的getcomment.data是否为评论列表数组，若接口返回的也是单个对象，同样会触发该报错

具体修复步骤 #

• 修改useState的初始值为空数组，替换原来的对象初始值：

// 替换原有错误的初始值定义
// const [comm, setcomm] = useState({
//         addcomment: "",
//         commdate: "",
//         commid: "",
//         commtime: "",
// })
// 修改为数组类型初始值
const [comm, setcomm] = useState([])

• 渲染列表前添加类型防御判断，同时给map渲染的列表项添加唯一key属性（避免React列表渲染警告）：

<TableBody>
    {
        // 先判断comm是否为数组，避免后端返回异常格式时报错
        Array.isArray(comm) ? comm.map((com) => (
            // 用评论id作为唯一key
            <TableRow key={com.commid}>
                <TableCell>
                    {com.commdate}
                    {com.addcomment}
                </TableCell>
            </TableRow>
        )) : null
    }
</TableBody>

• 确认后端接口返回格式：查看控制台console.log(getcomment.data)的输出，若接口返回的是外层包裹了业务状态的结构（例如{code:200, data:[...评论列表], msg:"success"}），则需要修改状态赋值逻辑，拿到实际的评论数组：

const loadcomment = async (id) => {
    const getcomment = await axios.get(`http://localhost:4000/getcomment/${id}`);
    // 示例：如果接口返回的数组在data字段下，就修改为以下写法
    setcomm(getcomment.data.data)
}

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