javascript - 为什么在使用 react redux 过滤时我的原始状态会发生变化

Question

我在 React 应用程序中使用 redux。为什么这个过滤函数会改变原来的 state.products？我不明白为什么

state.products = [
   { 
      type: "one",
      products: [
         { active: true },
         { active: false }
     ]
  }
 ]

function mapStateToProps(state) {
 const test = state.products.filter((item) => {
   if(item.type === "one") {
     return item.products = item.products.filter((item) => {
       item.active
      });
    }
    return item;
  });

  return {
    machineSearchWeightRange: state.machineSearchWeightRange,
    filteredItems: test //This will have only products active
 };
}

filteredItems 将只包含活跃的产品，但 state.products 也会更新，当再次尝试过滤相同的数据时只包含活跃的产品。

建议

Answer 1

因为您要分配给现有状态项的属性:

function mapStateToProps(state) {
  const test = state.products.filter((item) => {
    if(item.type === "one") {
      return item.products = item.products.filter((item) => { // <========== Here
        item.active
       });
     }
     return item;
   });

   return {
     machineSearchWeightRange: state.machineSearchWeightRange,
     filteredItems: test //This will have only products active
  };
}

相反，创建一个新 项目以返回。此外，看起来您需要 map 和 filter，而您实际上并没有返回 item.active在你内部的 filter 中(更多信息请参见 this question's answers):

function mapStateToProps(state) {
  const test = state.products.filter(({type}) => type === "one").map(item => {
    return {
        ...item,
        products: item.products.filter((item) => {
          return item.active;
        })
    };
  });

  return {
    machineSearchWeightRange: state.machineSearchWeightRange,
    filteredItems: test //This will have only products active
  };
}

---

旁注:这个:

products: item.products.filter((item) => {
  return item.active;
})

可以很简单:

products: item.products.filter(({active}) => active)