尝试更新 React Hooks 中的对象数组时丢失输入焦点答案

【问题标题】：Lost input focus when trying to update an array of objects in React Hooks尝试更新 React Hooks 中的对象数组时丢失输入焦点
【发布时间】：2019-08-14 18:17:45
【问题描述】：

我正在尝试更新（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",
  }
];

【问题讨论】：

发生这种情况是因为 onChange，您正在设置状态值。当您更改状态值时，它会重新呈现您的组件。这就是你注意力不集中的原因。

标签： reactjs

【解决方案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>
        );
      })}

【讨论】：