javascript map 方法動態渲染時輸入失去焦點

Question

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按鈕向標題 state 添加一個新的鍵值對，在表單中添加兩個新字段。

現在header.map會破壞舊組件並為每次按鍵呈現新組件，從而導致它失去焦點。

我嘗試將HeaderField組件移出CustomHeadersField 。 它沒有用。

感謝您的幫助！

Answer 1

根據反應文檔：

密鑰應該是穩定的、可預測的和唯一的。 不穩定的鍵（如 Math.random() 生成的鍵）會導致不必要地重新創建許多組件實例和 DOM 節點，這會導致性能下降並在子組件中丟失 state。

將 Math.random() 作為鍵傳遞是問題所在。 如果您不對列表重新排序，則可以使用索引作為鍵。 參考這個答案