React过滤仅生效数组最后一个值的问题求助

问题根源 #

你当前的代码在forEach循环里每次都直接给filterData重新赋值，相当于每次循环都基于原始的state.products重新过滤，前面循环的结果会被后面的完全覆盖。当循环到最后一个元素"Green"时，filterData就只保留了匹配"Green"的结果，所以看起来只有最后一个元素生效。

修正后的代码 #

const searchParameters = data && Object.keys(Object.assign({}, ...data));

filterData = state.products.filter((item) => {
  // 判断item是否匹配action.payload中的任意一个关键词
  return action.payload.some((keyword) => {
    return searchParameters.some((parameter) => {
      return item[parameter]
        .toString()
        .toLowerCase()
        .includes(keyword.toLowerCase());
    });
  });
});

代码说明 #

• 直接在state.products.filter的回调里，用action.payload.some()来判断当前item是否匹配payload数组中的任意一个关键词
• 这样一次过滤就能完成所有关键词的匹配，不会出现循环覆盖的问题
• 逻辑和你原本的一致：只要item的任意一个参数包含payload中的任意一个关键词，就会被保留

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