当使用 javascript map 方法动态呈现输入时，输入会失去焦点

问：

const HeaderField = ({
  handleHeaderChange,
  removeHeader,
  index,
  header,
}: any) => (
  <HeaderContainer>
    <TextField
      label="Key"
      value={header.key}
      onChange={e => handleHeaderChange(e.target.value, 'key', index)}
    />
    <TextField
      label="Value"
      value={header.value}
      onChange={e => handleHeaderChange(e.target.value, 'value', index)}
    />
);

const CustomHeadersField = ({ handleChange, fieldKey, categoryKey }: any) => {
  const [headers, setHeaders] = React.useState<headersType[] | null>(null);

  const addHeader = () => {
    const newHeaders = headers ? [...headers] : [];
    newHeaders.push({ key: '', value: '' });
    setHeaders(newHeaders);
  };

  const handleHeaderChange = (
    value: string,
    type: 'key' | 'value',
    index: number,
  ) => {
    const newHeaders: any = headers ? [...headers] : [];
    if (type === 'key') {
      newHeaders[index].key = value;
    } else {
      newHeaders[index].value = value;
    }
    setHeaders(newHeaders);
    handleChange(newHeaders, fieldKey, categoryKey);
  };

  return (
    <CustomHeadersContainer>
      {headers?.map((header, index) => (
        <HeaderField
          key={Math.random()}
          handleHeaderChange={handleHeaderChange}
          removeHeader={removeHeader}
          index={index}
          header={header}
        />
      ))}
      <Button
        onClick={addHeader}
        variant="contained"
        sx={{ width: 'fit-content' }}
      >
        Add Header
      </Button>
    </CustomHeadersContainer>
  );
};

“添加标题”按钮将新的键值对添加到标头状态，并在表单中添加两个新字段。

现在，header.map 会破坏旧组件，并在每次按下键时呈现新组件，从而导致其失去焦点。

我尝试将 HeaderField 组件移出 CustomHeadersField。它没有用。

感谢您的帮助！