react中 input自动失去焦点解决办法和原因

案例：（原因和解决办法在最下面）

import React, { useState } from 'react';
import { Input } from 'antd';

const Welcome: React.FC = () => {
  const [inputs, setInputs] = useState([
    {
      value: 1,
      key: 1
    },
    {
      value: 2,
      key: 2
    },
    {
      value: 3,
      key: 3
    },
  ])

  return (
    <>
      {
        inputs.map((item, index) => {
          return (
            <div
              key={item.value} // 输入时会失去焦点
            // key={item.key} // 当不改变key时输入时不会失去焦点
            // key={index} // 输入时不会失去焦点
            >
              {/* 原生input */}
              <input value={item.value} onChange={(e) => {
                inputs[index].value = e.target.value
                // 当key值随着index变化时也会失去焦点 如果不改变key则不会失去焦点
                inputs[index].key = e.target.value
                setInputs([...inputs])
              }} />
              {/* antd Input组件 */}
              <Input defaultValue={item.value} onChange={(e) => {
                inputs[index].value = e.target.value
                setInputs([...inputs])
              }} />
            </div>
          )
        })
      }
    </>
  );
};

export default Welcome;

解决办法：将map遍历时绑定的key的值改为不是动态变化的值(例如index 每一项的索引值，或给每一项设置一个固定的key或id)

原因：在react中，每一次输入都会触发onChange事件都会重新调用render()，所以每一个item都需要一个唯一的确定的key值，这个key的作用就是避免diff算法重新生成一个全新的dom，所以每当绑定的key变化时diff算法就会生成一个全新的dom，进而导致每次输入都会导致input会失去焦点。