React状态切换时多输入框值同步异常求助

问题现象 #

开发的React组件期望多个玩家的输入值独立更新，但出现以下异常：

• 切换target状态时，第一个输入框的值错误同步到所有其他输入框
• 修改第一个输入框内容时，其他输入框值会跟随变化
• 清空第一个输入框后，其他输入框仍残留字符

问题根源 #

异常来自两个核心逻辑的错误处理：

1. handleTestResultChange中，当target为true时，错误地将所有玩家的target值强制关联为第一个玩家的初始值，导致输入同步混乱
2. handleTargetChange关闭target模式时，错误清空了所有玩家的target值，且开启时直接覆盖所有值为第一个玩家的内容

修复方案 #

调整逻辑实现单向同步：

• 开启target模式时，将所有玩家的target值同步为第一个玩家的当前值，仅允许第一个玩家编辑，修改时同步到其他玩家
• 关闭target模式时，保留所有玩家当前的target值，允许独立编辑
• 修改输入变更逻辑，仅在修改第一个玩家的target时触发同步

修改后的核心代码 #

父组件逻辑修改

// 修正输入变更处理逻辑
const handleTestResultChange = (
  userId: string,
  type: 'target' | 'result',
  value: string
) => {
  setTestResults((prevResults) => {
    const updatedResults = { ...prevResults };

    if (type === 'target' && target) {
      // 仅当修改第一个玩家的target时，同步到所有其他玩家
      const firstUserId = Object.keys(prevResults)[0];
      if (userId === firstUserId) {
        Object.keys(updatedResults).forEach(key => {
          updatedResults[key] = {
            ...updatedResults[key],
            target: value
          };
        });
      }
    } else {
      updatedResults[userId] = {
        ...updatedResults[userId],
        [type]: value
      };
    }

    return updatedResults;
  });
};

// 修正target状态切换逻辑
const handleTargetChange = () => {
  setTarget((prevTarget) => {
    const newTarget = !prevTarget;

    setTestResults((prevResults) => {
      const updatedResults = { ...prevResults };

      if (newTarget) {
        // 开启target模式时，同步所有玩家的target为第一个玩家的当前值
        const firstUserId = Object.keys(prevResults)[0];
        if (firstUserId) {
          const firstTargetValue = prevResults[firstUserId].target;
          Object.keys(updatedResults).forEach(userId => {
            updatedResults[userId] = {
              ...updatedResults[userId],
              target: firstTargetValue
            };
          });
        }
      }
      // 关闭target模式时保留当前所有target值，不再清空

      return updatedResults;
    });

    return newTarget;
  });
};

子组件（TestResultTable）保持不变

子组件的输入绑定、禁用逻辑已正确，无需修改。

修复效果 #

• 开启target模式：所有玩家的target值同步为第一个玩家的当前值，仅第一个玩家可编辑，修改时其他玩家自动同步
• 关闭target模式：所有玩家的target值保留当前状态，可独立编辑
• 输入值不再出现错误同步、残留字符的问题

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