React中数组更新成功但输入框内容未同步更新的问题

你的核心问题在于输入框的 onChange 事件没有关联对应数组索引，导致更新逻辑错位；同时当前通过匹配letters_rec_of_truth值来修改数组的逻辑，和用户实际输入的输入框位置不对应，自然无法正确更新状态。

具体修改点： #

• 给每个输入框的onChange传递当前索引，让事件处理器明确要更新数组的哪个位置
• 简化更新逻辑，根据索引直接修改对应位置的元素
• 保留value={letter}确保输入框为受控组件，兼顾内容显示与状态响应

修改后的代码： #

const [letters, setLetters] = useState(workLetters);

function inputChangeHandler(event, idx) {
  const incomingLetter = event.target.value;
  // 复制原数组，避免直接修改状态
  const nextLetters = [...letters];
  // 根据当前输入框的索引，直接更新对应位置的元素
  nextLetters[idx] = incomingLetter;
  console.log("next letters is now " + nextLetters);
  setLetters(nextLetters);
}

console.log("letters is now " + letters);

return (
  <div>
    {letters.map((letter, idx) => {
      return (
        <input
          type="text"
          key={idx}
          value={letter}
          // 传递当前索引给事件处理器
          onChange={(e) => inputChangeHandler(e, idx)}
        ></input>
      );
    })}
  </div>
);

额外业务逻辑补充（若需验证输入正确性）： #

如果你的需求是只有输入值匹配letters_rec_of_truth对应位置的正确值时才更新数组，可以在更新前加判断：

function inputChangeHandler(event, idx) {
  const incomingLetter = event.target.value;
  // 验证输入值是否符合对应位置的正确值
  if (letters_rec_of_truth[idx] === incomingLetter) {
    const nextLetters = [...letters];
    nextLetters[idx] = incomingLetter;
    setLetters(nextLetters);
  }
}

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