React嵌套对象状态更新问题：Checkbox点击不切换勾选状态

核心问题 #

你直接修改了原状态数组的引用，React通过浅比较判断状态未发生变化，因此不会触发组件重渲染，导致勾选状态无法更新。

修复代码 #

修正状态更新逻辑 #

将原setOption的写法改为创建新数组的方式，确保React能检测到状态变化：

{option.map(({ permission, isSelected }, i) => (
    <CheckboxIcon
      viewed={isSelected}
      onPress={() =>
        setOption(prev => 
          // 使用map创建新数组，仅修改目标项的状态
          prev.map((item, index) => 
            index === i ? { ...item, isSelected: !item.isSelected } : item
          )
        )
      }
    />
))}

或者另一种复制数组的写法：

setOption(prev => {
  // 先复制原数组生成新引用
  const newOptions = [...prev];
  // 修改新数组中的目标项
  newOptions[i] = { ...newOptions[i], isSelected: !newOptions[i].isSelected };
  return newOptions;
})

补充检查点 #

• 确认IconContainer是可交互组件（比如TouchableOpacity、Pressable），如果只是普通容器组件，onPress事件不会生效。
• 检查TickIcon的渲染逻辑是否正常，确保viewed为true时能正确显示勾选图标。

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