如何在React Native中用Hooks实现嵌套数组的多选与取消选中

你的代码里有几个关键问题导致多选功能无法正常工作，以下是修正方案：

问题分析 #

• 处理完innerArray的更新后，没有把新数组赋值回父对象，导致更新内容丢失
• 未调用setData触发状态更新，UI无法同步变化
• else分支返回{val}会造成对象嵌套，破坏原数据结构

修正后的onClick函数 #

const onClick = (innerData, item) => {
  // 遍历外层数组，定位目标父项
  const updatedData = Data.map((val) => {
    if (val.id === item.id) {
      // 遍历内层数组，切换目标子项的选中状态
      const updatedInnerArray = val.innerArray.map((value) => {
        if (value.id === innerData.id) {
          return { ...value, isselected: !value.isselected };
        }
        // 非目标子项保持原状态
        return value;
      });
      // 返回更新后的父对象，替换原innerArray
      return { ...val, innerArray: updatedInnerArray };
    }
    // 非目标父项直接返回原对象
    return val;
  });
  // 更新状态，触发UI刷新
  setData(updatedData);
};

额外优化：直观展示选中状态 #

为了让用户清晰看到选中效果，可以修改TouchableOpacity的样式和内容：

<TouchableOpacity
  style={[
    styles.circleView1,
    innerData.isselected && { backgroundColor: '#2196F3' } // 选中时添加高亮背景
  ]}
  onPress={() => onClick(innerData, item)}
>
  {/* 选中时显示对应图标 */}
  {innerData.isselected && (
    <Image 
      source={innerData.image} 
      style={{ width: 20, height: 20, tintColor: '#fff' }} 
    />
  )}
</TouchableOpacity>

这样就能实现点击切换单个子项的选中状态，支持多选功能，同时UI会实时同步更新。

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