React中多办公地点视图选择复选框异常联动问题排查

这问题我之前也碰到过，核心是状态管理的索引冲突，咱们一步步拆解原因和解决方案：

问题根源 #

你现在用的是一维的checkedState数组，而且两个嵌套map循环都复用了index参数：

• 每个办公地点的视图列表都是从index=0开始遍历
• 点击某个办公地点的第N个视图时，会修改checkedState[N]，这会导致所有办公地点的第N个视图都跟着变选中状态——因为它们都绑定了checked={checkedState[index]}

另外，你的key也有隐患：用index拼接的key不够稳定，最好用唯一标识（比如office.id和view.id）来生成key，避免React渲染时出现复用组件的问题。

解决方案 #

1. 重构状态结构，区分不同办公地点的视图状态 #

把一维的checkedState改成以办公地点ID为键的对象，让每个办公地点对应独立的视图选中状态：

// 初始化状态：每个办公地点对应一个数组，记录该地点下所有视图的选中状态
const [checkedState, setCheckedState] = useState(() => {
  return officesArray.reduce((acc, office) => {
    acc[office.id] = viewsArray.map(() => false); // 初始全部未选中
    return acc;
  }, {});
});

如果想更精准（比如用视图ID做键），可以改成：

const [checkedState, setCheckedState] = useState(() => {
  return officesArray.reduce((acc, office) => {
    acc[office.id] = viewsArray.reduce((viewAcc, view) => {
      viewAcc[view.id] = false;
      return viewAcc;
    }, {});
    return acc;
  }, {});
});

2. 修改渲染逻辑，绑定独立状态 #

更新复选框的checked属性和onChange参数，确保每个办公地点的视图对应自己的状态项：

<div>
  {officesArray.map((office) => {
    return (
      <div key={office.id}> {/* 用office.id作为key，更稳定 */}
        <h3>site {office.name}</h3>
        <div>
          {viewsArray.map((view, viewIndex) => {
            // 生成唯一的复选框ID和key
            const checkboxId = `${view.id}-${office.id}`;
            return (
              <div key={checkboxId}>
                <label htmlFor={checkboxId}>
                  <input
                    type="checkbox"
                    id={checkboxId}
                    name={checkboxId}
                    value={checkboxId}
                    // 绑定当前办公地点下该视图的状态
                    checked={checkedState[office.id][viewIndex]}
                    // 传递视图索引和办公地点ID
                    onChange={() => handleOnChange(viewIndex, office.id)}
                  />
                  {view.name}
                </label>
              </div>
            );
          })}
        </div>
      </div>
    );
  })}
</div>

3. 更新handleOnChange函数，精准修改状态 #

现在状态是按办公地点分组的，所以要针对特定办公地点的视图状态进行更新：

const handleOnChange = (viewIndex, officeId) => {
  // 复制当前状态，避免直接修改原对象
  const updatedCheckedState = { ...checkedState };
  // 切换对应办公地点下该视图的选中状态
  updatedCheckedState[officeId][viewIndex] = !updatedCheckedState[officeId][viewIndex];
  
  // 调用父组件的set方法，传递正确的视图ID和办公地点ID
  const targetView = viewsArray[viewIndex];
  prop.set({ id: targetView.id_view, officeId: officeId });
  
  setCheckedState(updatedCheckedState);
};

如果用的是视图ID做键的状态结构，handleOnChange可以改成：

const handleOnChange = (viewId, officeId) => {
  const updatedCheckedState = { ...checkedState };
  updatedCheckedState[officeId][viewId] = !updatedCheckedState[officeId][viewId];
  
  const targetView = viewsArray.find(v => v.id === viewId);
  prop.set({ id: targetView.id_view, officeId: officeId });
  
  setCheckedState(updatedCheckedState);
};

这样修改后，每个办公地点的视图状态都是独立管理的，就不会出现点击一个办公地点的复选框，影响另一个办公地点的情况了。

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