React双组件下修改嵌套数组对象isSelected属性报错求助

你遇到的错误核心是未找到目标对象就直接访问其属性，或是状态更新时违反了React不可变性原则，导致状态异常变为undefined。下面结合典型场景给出具体解决方案：

先匹配你的嵌套数据结构（常见示例） #

假设你的状态数据结构如下：

const [data, setData] = useState([
  {
    id: 1,
    options: [
      { id: 'opt1', name: '选项1', isSelected: false },
      { id: 'opt2', name: '选项2', isSelected: false }
    ]
  },
  {
    id: 2,
    options: [
      { id: 'opt3', name: '选项3', isSelected: false }
    ]
  }
]);

错误写法的常见坑点 #

你之前的尝试大概率踩了这些雷：

1. 直接修改原状态对象：React状态不可变，修改原对象不会触发重渲染，还会导致状态异常
2. 浅拷贝仅处理外层数组：内层对象还是原引用，更新后状态未正确变更
3. 未判断目标项是否存在：直接访问item.options或option.isSelected，找不到时就会抛出undefined错误

正确的状态更新方式 #

方案1：逐层解构+map（固定两层嵌套场景） #

用函数式更新获取最新状态，通过map遍历数组，仅修改目标项，其余项保持原样，严格遵循不可变性：

const handleOptionClick = (itemId, optId) => {
  setData(prevData => 
    prevData.map(item => {
      // 不是目标item，直接返回原对象
      if (item.id !== itemId) return item;
      
      // 无options数组直接返回，避免报错
      if (!item.options) return item;
      
      // 找到目标item，更新其options数组
      return {
        ...item, // 拷贝item的其他属性
        options: item.options.map(option => {
          // 不是目标选项，直接返回原对象
          if (option.id !== optId) return option;
          // 目标选项，返回新对象修改isSelected
          return { ...option, isSelected: !option.isSelected };
        })
      };
    })
  );
};

方案2：递归更新（嵌套层级不固定场景） #

如果数据嵌套更深或层级不确定，用递归函数定位目标项并更新：

// 递归函数：找到目标id的选项并切换isSelected
const updateOptionSelected = (arr, targetOptId) => {
  return arr.map(item => {
    // 当前项是选项（含isSelected属性）
    if ('isSelected' in item) {
      if (item.id === targetOptId) {
        return { ...item, isSelected: !item.isSelected };
      }
      return item;
    }
    // 当前项有子数组，递归处理
    if (item.options) {
      return { ...item, options: updateOptionSelected(item.options, targetOptId) };
    }
    return item;
  });
};

// 点击事件调用
const handleOptionClick = (targetOptId) => {
  setData(prevData => updateOptionSelected(prevData, targetOptId));
};

额外注意事项 #

• 渲染时传递正确的id：确保点击事件绑定的是当前item和option的真实id，避免传错导致找不到目标项

  // 渲染示例
  {data.map(item => (
    <div key={item.id}>
      {item.options?.map(opt => (
        <button 
          key={opt.id}
          onClick={() => handleOptionClick(item.id, opt.id)}
          style={{ backgroundColor: opt.isSelected ? '#165DFF' : '#fff' }}
        >
          {opt.name}
        </button>
      ))}
    </div>
  ))}
  

• 用?.可选链操作符：访问嵌套属性时用item.options?.map代替item.options.map，避免因某个item无options数组而报错

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