ReactJS中array.map()不是函数报错问题求助

嘿，我一眼就瞅出问题的根源啦！

核心错误：对象误用成数组 #

你一开始把removedItemstax声明成了空对象：

const removedItemstax = {};

但你后面却调用了数组的push()方法，而且还想用map()来处理它——这两个方法都是数组专属的，对象根本没有这些方法，这就是报错map()不是函数的直接原因！

为啥控制台能看到元素？因为JS里对象可以动态添加属性，当你强行给对象用push时，其实是给它加了0、1这类数字键的属性（看起来和数组索引一样），控制台打印时会模拟数组的展示形式，但它本质还是对象，不是真正的数组，所以没法用数组方法。

修正步骤 #

1. 把removedItemstax改成数组

首先把声明改成空数组：

const removedItemstax = [];

2. 修复forEach遍历的隐藏bug

另外，你用array.forEach结合splice会有问题：因为splice会修改原数组的长度，遍历到被删除元素的下一个索引时，会跳过一个元素（因为数组元素前移了）。推荐两种更安全的写法：

写法一：倒序遍历数组

const removedItemstax = [];
function findAndRemove1(array, property, value) {
  // 倒序遍历，避免splice导致的索引错乱
  for (let index = array.length - 1; index >= 0; index--) {
    const result = array[index];
    if (result[property] === value) {
      const removedItem = array.splice(index, 1);
      removedItemstax.push(...removedItem); // 用展开运算符把数组元素推进去，避免嵌套数组
    }
  }
}

写法二：用filter分离元素（更简洁，不修改原数组）

如果不需要修改原数组，推荐用filter来筛选出要保留的元素，同时收集被移除的元素：

const removedItemstax = [];
function findAndRemove1(array, property, value) {
  // 筛选出不需要移除的元素，原数组可以替换成这个结果
  const remainingItems = array.filter(result => {
    if (result[property] === value) {
      removedItemstax.push(result);
      return false;
    }
    return true;
  });
  // 如果需要修改原数组，可以在这里替换：array.splice(0, array.length, ...remainingItems);
}

验证修改效果 #

修改后，removedItemstax是真正的数组，你就能正常调用map()了：

const tax = removedItemstax.map(d => d.taxId);

也能正常把它作为状态通过props传递，不会再出现map()相关的报错啦！

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