reactjs - 使用 useRef 和 useEffect 在功能组件挂载后存储到变量

Question

我在一个页面上有同一组件的多个实例，我想为每个实例提供一个唯一的 ID。通常在类组件中我会声明一个 this.实例变量，在 componentDidMount() 中使用 cuid() 设置变量，并在 render 方法中引用它。

现在，在 React 功能组件中尝试此操作并尝试在返回中使用 id.current 引用它似乎并没有给我预期的结果。某些组件的 ID 仍然为空。我错过了什么吗？

  const id = useRef(null);
  useEffect(() => {
    id.current = cuid();
  }, []);

Answer 1

您只需将 cuid() 作为参数传递给 useRef。

const id = useRef(cuid());

这将在 id 变量中存储一个唯一的 id，该变量仅在挂载时创建一次。

具有空依赖项的

useEffect 就像将在渲染后运行的 componentDidMount 。因此，在那里设置 id 将导致在初始渲染期间不可用。