MongoDB返回的对象数组调用map方法报is not a function错误如何解决

问题根因 #

你后端接口在返回数据时执行了getprint +'Succes!'字符串拼接操作，会自动将MongoDB查询返回的数组对象强制转换为字符串格式，导致前端拿到的res.data是字符串而非数组，字符串原型上没有map方法，因此触发报错。

修复方案 #

1. 后端接口调整 #

不要直接拼接数组和字符串，将数据和状态信息封装为对象返回：

router.get('/receipt/all', async (req, res) => {
    try {
        const getprint = await Prints.find()
        res.status(200).json({
            list: getprint,
            message: 'Success!'
        })
    } catch (error) {
        res.status(500).json({
            message: `Error fetching data!!! ${error}`
        })
    }
})

2. 前端取值逻辑调整 #

从返回的结构化对象中提取数组字段赋值：

const getOrder = async() =>{
    try {
        const res = await axios.get("/products/receipt/all")
        setPrintz(res.data.list)
    } catch (error) {
        console.log(error);
    }
}

3. 渲染逻辑优化 #

增加数组类型判断兜底，同时给列表元素添加唯一key属性避免React警告：

{Array.isArray(printz) && printz.map(x =>(                   
    <tbody key={x._id}>
        <tr>
            <td>{x.product}</td>
            <td>{x.price}</td>
        </tr>
    </tbody>
))}

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