为什么在使用React Redux进行过滤时我的原始状态会发生变化

Question

即时通讯在React应用程序中使用redux。 为什么此过滤函数会改变原始state.product？ 我不明白为什么

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 返回 item.active （有关更多信息，请参阅此问题的答案 ）：

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)