React传入布尔值true作为prop子组件收到false且toggle点击三次后失效

问题根源 #

你的servicesReducer中存在状态直接突变的问题，违反了React状态不可变的原则，导致React无法正常检测到状态更新，进而出现渲染异常：

• 你通过let newSelectedOptions = state.selectedOptions直接将变量指向了原状态中的数组引用，两个变量指向同一块内存地址
• 当选项未选中需要新增时，你直接调用push方法修改了原数组，数组的引用没有发生变化，React浅比较时会认为状态没有更新，不会触发重渲染
• 只有当选中后取消时，filter方法会返回新数组，引用改变才会触发更新，这就是点击三次后状态卡死的原因：第三次点击会走到新增逻辑，修改原数组但不触发重渲染，表面看起来就像状态卡住了

修复方案 #

修改servicesReducer的toggle option分支逻辑，保证所有操作都返回新数组，不修改原状态，同时补充默认分支返回原状态：

const servicesReducer = (state, action) => {
  switch (action.type) {
    case "toggle option":
      const isCurrentlySelected = state.selectedOptions.includes(
        action.payload.name
      );
      let newSelectedOptions;

      if (isCurrentlySelected) {
        // filter本身返回新数组，无需额外处理
        newSelectedOptions = state.selectedOptions.filter(
          (item) => item !== action.payload.name
        );
      } else {
        // 用展开运算符创建新数组，禁止直接push原数组
        newSelectedOptions = [...state.selectedOptions, action.payload.name];
      }

      return {
        ...state,
        selectedOptions: newSelectedOptions,
      };
    case "add options":
      return {
        ...state,
      };
    default:
      return state;
  }
};

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