reactjs - 尝试更新 React Hooks 中的对象数组时失去输入焦点

Question

我正在尝试更新 (onchange) 对象数组中的状态，但每次输入内容时我都会失去输入焦点。

知道为什么会这样吗？

这是一个沙盒: https://codesandbox.io/s/inspiring-booth-636tx

 {stagesState.map(stage => {
        return (
          <div key={uuidv4()}>
            <input
              type="text"
              onChange={e => {
                const name = e.target.value;
                setStagesState(currentStage =>
                  currentStage.map(x =>
                    x.id === stage.id ? { ...x, name } : x
                  )
                );
              }}
              value={stage.name || ""}
            />
          </div>
        );
      })}

这是我的数据的样子:

[
  {
    name: "First Stage",

  },
  {
    name: "Second Stage",    
  },
  {
    name: "Third Stage",
  }
];

Answer 1

这是因为使用 uuidv4 定义的 key 。每个渲染 react 都无法识别数组中的输入是新的还是旧的。所以它失去了焦点。使用 id 而不是 uuidv4 作为键，它会工作得很好。

 {stagesState.map(stage => {
        return (
          <div key={stage.id}>
            <input
              type="text"
              onChange={e => {
                const name = e.target.value;
                setStagesState(currentStage =>
                  currentStage.map(x =>
                    x.id === stage.id ? { ...x, name } : x
                  )
                );
              }}
              value={stage.name || ""}
            />
          </div>
        );
      })}