尝试更新 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. 每个渲染反应都无法识别数组中的输入是新的还是旧的。所以它失去了焦点。使用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>
        );
      })}