Javascript 为什么不'；是否使用Redux更新我的复选框？

我正在开发一个React本地移动应用程序，使用Redux管理状态。我有一个过滤器来管理显示的数据

我正在使用Redux管理过滤器中的所有数据

很简单：我点击复选框，它就会被点击。我再次点击复选框（猜怎么着），它会被解锁。当有一个值为“allInclusive”的框时，除“allInclusive”框外，所有框均未选中

这是减速器的代码和复选框的代码

var comparators = {...state.comparators};
      if (!comparators[action.payload.comparator]) {
        comparators[action.payload.comparator] = {};
        comparators[action.payload.comparator][action.payload.name] = [action.payload.value];
      } else {
        if (!comparators[action.payload.comparator][action.payload.name]) {
          comparators[action.payload.comparator][action.payload.name] = [action.payload.value];
        } else {
          if (comparators[action.payload.comparator][action.payload.name].includes(action.payload.value)) {
            comparators[action.payload.comparator][action.payload.name] = comparators[action.payload.comparator][action.payload.name].filter(value => value !== action.payload.value);
          } else {
            comparators[action.payload.comparator][action.payload.name].push(action.payload.value);
          }
        }
      }
      return Object.assign({}, state, {
        comparators,
      });

import React，{Component}来自'React'；
从“react native”导入{View，StyleSheet}；
从“../res/colors/index”导入颜色；
从“react native elements”导入{CheckBox}；
从“道具类型”导入道具类型；
从“.”导入{Text}；
从'd3'导入{style}；
从“../i18n/i18n”导入i18n；
从'react redux'导入{connect}；
将*作为动作从“../actions”导入；
导出类比较器复选框容器扩展组件{
建造师（道具）{
超级（道具）；
this.state={checked:false}；
}
选中（值）{
if（this.props.filter.includes（'allInclusive'））{
返回值==='allInclusive'；
}
警报（JSON.stringify（this.props.filter））；
返回此.props.filter.includes（值）；
}
render（）{
返回(
{this.props.title+JSON.stringify（this.props.filter）}
{this.props.options.map（option=>(
this.props.checkboxFilterChange(
这个.props.type，
这个.props.name，
期权价值，
)
}
title={i18n.t（option.title）}
containerStyle={styles.containerStyle}
textStyle={style.textStyle}
fontStyle={style.textStyle}
/>
))}
);
}
}
const styles=StyleSheet.create({
复选框容器：{
宽度：“100%”，
marginLeft:'自动'，
marginRight:“自动”，
玛金托普：14，
},
方格针：{
尺寸：10，
颜色：colors.darkGray，
},
复选框行：{
显示：“flex”，
flexDirection:'行'，
justifyContent:“flex start”，
对齐项目：“居中”，
},
checkboxLineText：{
尺寸：16，
颜色：colors.darkGray，
},
集装箱运输方式：{
背景色：“透明”，
边框宽度：0，
marginBottom:0，
玛金托普：0，
填充：10，
},
文本样式：{
边缘左：2，
颜色：colors.darkGray，
},
});
常量mapStateToProps=（{comparators}，ownProps）=>{
if（comparators.comparators[ownProps.type]&&comparators.comparators[ownProps.type][ownProps.name]）{
返回{
筛选器：comparators.comparators[ownProps.type][ownProps.name]，
};
}否则{
返回{
过滤器：[]，
}
}
};
导出默认连接(
MapStateTops，
行动，
)（比较器复选框容器）；

您正在改变减速机中的状态，因为。不可变更新始终需要复制对象和数组的每一层嵌套

编写Redux逻辑的第一条规则是：

你应该改用电脑。它不仅会捕捉到这些意外的突变并警告您，

createSlice

API允许您实际编写“突变”代码，并将其转换为安全、正确的不可变更新

---

你也应该花点时间通读Dave Ceddia在上的帖子。

你正在改变你的减速机的状态，因为。不可变更新始终需要复制对象和数组的每一层嵌套

编写Redux逻辑的第一条规则是：

你应该改用电脑。它不仅会捕捉到这些意外的突变并警告您，

createSlice

API允许您实际编写“突变”代码，并将其转换为安全、正确的不可变更新

---

您还应该花时间通读Dave Ceddia在上的帖子。

这里是重新编写为不可变的缩减器：

 const { comparators } = state;
  const { comparator, name, value } = action.payload;

  if (!comparators[comparator]) {
    return {
      ...state,
      comparators: {
        [comparator]: {
          [name]: value
        }
      }
    };
  } else {
    return !comparators[comparator][name]
      ? {
          ...state,
          comparators: {
            [comparator]: {
              [name]: value
            }
          }
        }
      : comparators[comparator][name].includes([value])
      ? {
          ...state,
          comparators: {
            [name]: comparators[comparator][name].filter(val2 => val2 !== value)
          }
        }
      : {
          ...state,
          comparators: {
            [comparator]: {
              [name]: [...comparators.comparator.name, value]
            }
          }
        };
  }

---

以下是重新编写为不可变的减速器：

 const { comparators } = state;
  const { comparator, name, value } = action.payload;

  if (!comparators[comparator]) {
    return {
      ...state,
      comparators: {
        [comparator]: {
          [name]: value
        }
      }
    };
  } else {
    return !comparators[comparator][name]
      ? {
          ...state,
          comparators: {
            [comparator]: {
              [name]: value
            }
          }
        }
      : comparators[comparator][name].includes([value])
      ? {
          ...state,
          comparators: {
            [name]: comparators[comparator][name].filter(val2 => val2 !== value)
          }
        }
      : {
          ...state,
          comparators: {
            [comparator]: {
              [name]: [...comparators.comparator.name, value]
            }
          }
        };
  }

---

你在redux调试器中观察到状态变化了吗？@ahmed应该提到它。状态更新，组件没有。我不知道它是否对您有帮助，但这是我对一个简单的react复选框问题的回答：@gazdagergo无法工作，我的复选框必须存储在数组中才能工作。您在redux调试器中观察到状态变化了吗？@ahmed应该提到它。状态更新，组件没有。我不知道它是否有帮助，但这是我对一个简单的react复选框问题的回答：@gazdagergo不起作用，我的复选框必须存储在数组中才能起作用。无法切换。不幸的是，我不是项目中唯一的一个人，我不能仅仅改变所有的大型项目代码来解决这样的问题。我还不太明白如何修复我的代码，我对它如何变得不可变感到困惑，但我将尝试学习..您可以增量迁移到RTK，这是一个好主意，特别是因为它可以防止像这样的重大错误。将存储设置逻辑替换为RTK的

createStore

，然后只重写这一个reducer以使用

createSlice

。您的代码将更短，更易于阅读，并且工作正常。除此之外，请阅读我在帖子中的链接，了解如何正确编写不可变的更新，如果你打算手工操作的话。嗨！我确实关注了你在帖子中添加的内容，我认为我做得很好。然而，它仍然没有更新。您似乎是这方面的专家，所以请您快速浏览一下我的代码，看看我是否犯了一些高级（或愚蠢）错误：无法切换。不幸的是，我不是项目中唯一的一个人，我不能仅仅改变所有的大型项目代码来解决这样的问题。我还不知道如何修复我的代码，我对它如何变得不可变感到困惑，但我将尝试学习..您可以增量迁移到RTK，这是一个好主意，特别是因为