Question

我正在尝试遍历如下所示的对象数组：

const arr = [{
  id: 1,
  name: "John",
  storeName: "Amazon",
  price: 100,
  isRecieved: false,
  deliveryDate: some date
}, ....]

我正在遍历具有从用户那里收到的产品ID的数组，根据它的ID查找相关商品，并将键“ isRecieved”从false更改为true。

这是我的代码：

const filterReceivedProduct = (list, id) => {
  const changeReceivedState = list.filter((item) => {
      return item.id === id ? **item[isRecieved]** = true : item;
  })
  return changeReceivedState
}

但是当我尝试使用方括号表示法访问对象时，它将返回值（在这种情况下为“ false”），并且我无法将值更改为true。.

我做错了什么？

Answer 1

filter毫无意义。根据条件过滤用于filter某个数组。如果您只想更改数组内部对象的某些属性，请使用map。

请参阅以下示例。

const arr = [{
  id: 1,
  name: "John",
  storeName: "Amazon",
  price: 100,
  isRecieved: false,
  deliveryDate: 'some date'
}, {
  id: 2,
  name: "Doe",
  storeName: "Amazon",
  price: 100,
  isRecieved: false,
  deliveryDate: 'some date'
}];

filterReceivedProduct = (list, id) => {
  return list.map(item => {
    if(item.id === id) {
      item.isRecieved = true;
    }
    return item;
  });
}

console.log(filterReceivedProduct(arr, 1))

Answer 2

您无需在此处使用.filter()。 filter方法用于从数组中删除元素。您要做的是将每个元素/对象map转换为一个新对象，该对象具有旧对象的所有属性，其中包含更新的isRecieved属性。要创建具有旧对象所有属性的新对象，您可以spread将旧对象的属性和值转换为新对象（{...item}）。然后，您可以根据商品ID是否与传递给函数的ID相匹配来更新isRecived：

const arr = [{
  id: 1,
  name: "John",
  storeName: "Amazon",
  price: 100,
  isRecieved: false,
  deliveryDate: 'some date'
}, {
  id: 2,
  name: "Alex",
  storeName: "Apple",
  price: 200,
  isRecieved: false,
  deliveryDate: 'some date2'
}];

const filterReceivedProduct = (list, id) =>
  list.map(item => ({
    ...item,
    isRecieved: item.id === id // sets isRecieved to true or false based on the equalty comparison
  }));

const res = filterReceivedProduct(arr, 1);
console.log(res);

通过在.map()回调中创建一个新对象，您永远不会在arr中对原始对象进行突变，而是将所有内容视为不可变的。

遍历对象数组并更改对象值

2 个答案: