React中迭代生成组件的状态设置与输入框值更新问题

核心问题 #

1. 受控组件实现错误：输入框的value未绑定到inputValues状态，而是硬编码（如"10"）或未设置，导致React渲染时会覆盖你手动修改的DOM值。
2. 参数顺序不匹配：handleChange函数定义的参数顺序和调用时传入的参数完全错位，导致逻辑计算和状态更新全部出错。
3. 违背React数据流原则：直接操作DOM修改输入框值，React会在组件重新渲染时根据状态重置DOM，手动修改的内容会被覆盖。
4. 冗余的强制渲染：renderKey完全没必要，状态更新后React会自动触发组件重渲染。

修复步骤 #

1. 修正输入框的value绑定

将所有输入框的value绑定到inputValues状态，确保输入框是受控组件：

{holes.map((item, index) => (
  <React.Fragment key={`hole-${item.id}`}>
    <div className="griditem">
      <input
        type="text"
        className="input"
        label="playerAScore"
        data-hole-number={item.holeNumber}
        data-id={item.id}
        value={inputValues[`${players[0].id}-${item.holeNumber}`] || ''}
        id={`${players[0].id}-${item.holeNumber}`}
        onChange={(event) =>
          handleChange(
            event,
            index,
            item.par,
            item.stroke,
            handicapPlayerA,
            item.holeNumber,
            item.id,
            players[0].id
          )
        }
      />
    </div>
    <div className="griditem">
      <input
        type="text"
        className="input"
        label="playerBScore"
        value={inputValues[`${players[1].id}-${item.holeNumber}`] || ''}
        id={`${players[1].id}-${item.holeNumber}`}
        onChange={(event) =>
          handleChange(
            event,
            index,
            item.par,
            item.stroke,
            handicapPlayerB,
            item.holeNumber,
            item.id,
            players[1].id
          )
        }
      />
    </div>
    <div className="griditem">
      <input
        type="text"
        className="input"
        label="playerCScore"
        value={inputValues[`${players[2].id}-${item.holeNumber}`] || ''}
        id={`${players[2].id}-${item.holeNumber}`}
        onChange={(event) =>
          handleChange(
            event,
            index,
            item.par,
            item.stroke,
            handicapPlayerC,
            item.holeNumber,
            item.id,
            players[2].id
          )
        }
      />
    </div>
  </React.Fragment>
))}

2. 修正handleChange函数逻辑

删除手动操作DOM的代码，调整参数顺序匹配调用逻辑，完全通过状态更新输入框值：

const handleChange = (
  event,
  index,
  par,
  stroke,
  handicap,
  holeNumber,
  holeId,
  playerId
) => {
  const inputValue = event.target.value;
  const inputElementId = event.target.id;

  // 计算最终要显示的分数
  const score = calculatePoints(par, inputValue, handicap, stroke);

  // 更新状态，React会自动同步到输入框
  setInputValues((prevState) => ({
    ...prevState,
    [inputElementId]: score,
  }));
};

3. 清理冗余状态

删除不必要的renderKey状态，只保留inputValues即可：

const [inputValues, setInputValues] = useState({});

为什么原来的方法无效？ #

• 未绑定状态的输入框属于非受控组件，React每次渲染都会用初始硬编码值覆盖DOM，你手动修改的内容会被重置。
• 参数顺序错位导致calculatePoints拿到错误的参数，计算出的分数无效，同时状态更新的键值也出错。
• 直接操作DOM修改输入框值违背了React单向数据流原则，组件重渲染时会根据状态重新生成DOM，手动修改的内容会被丢弃。

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