在 React 组件中为行生成唯一 ID - ID 不会在渲染中保留

Question

我正在开发一个 React 组件，我需要为表中的每一行生成一个唯一的 ID。为了实现这一目标，我使用以下代码：

let uniqueID = 1;
return <td style={{ textAlign: 'center' }}>{uniqueID++}</td>;

但是，我遇到了一个问题，即为每行生成的唯一 ID 在渲染过程中并未持续存在。重新渲染时，ID 似乎会重置或更改，并且我希望每行的 ID 保持一致。

Answer 1

在当前的实现中，uniqueID 是组件的局部变量，每次渲染组件时都会重新初始化，从而导致观察到的行为。

使用 React State 来代替

  const [uniqueID, setUniqueID] = useState(1);

  return <td style={{ textAlign: 'center' }}>{setUniqueID((prevID) => prevID + 1)}</td>;