React报错TypeError: components.map is not a function问题排查求助

根本原因 #

Array.push() 方法的返回值不是修改后的新数组，而是执行push操作后数组的长度（数字类型）。你在Board.js的drop回调中直接把push的返回值传给了setComponents，导致components状态从初始的数组类型变成了数字类型，数字不存在map方法，触发报错。

错误代码定位 #

Board.js中drop回调的错误写法：

drop: (item) => {
    setComponents(components.push(item));
    console.log(components);
}

这里components.push(item)执行后会修改原数组，所以你打印components的时候会看到新增了元素的数组，但setComponents实际存入状态的是push返回的数字，下一次渲染时components就会变成数字，触发报错。

修复方案 #

两种合法的更新数组状态的写法：

• 扩展运算符生成新数组（常规场景适用）

drop: (item) => {
    setComponents([...components, item]);
}

• 函数式更新（避免闭包陷阱，更稳妥的写法）

drop: (item) => {
    setComponents(prevComponents => [...prevComponents, item]);
}

为什么Category.js调用正常 #

Category中传入Components组件的category.data本身就是数组类型，没有涉及到错误的状态更新操作，所以map方法可以正常执行。

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