在 useEffect-hook 之后反应使用 useMemo-hook

Question

我需要访问 HTML 元素以便稍后与它们进行交互（例如在按钮单击时添加动画）。 为此，我想使用useMemo -hook。 我的设置如下：

我通过useEffect从 firebase 获取数据：

useEffect(() => {
  const unsubscribe = database.collection("users").onSnapshot((snapshot) => {
    snapshot.forEach((doc) => {
    ...
}, []);

并将其存储在useState -hook 中：

const [users, setUsers] = useState([] as any[]);

在这种情况下，首先从数据库获取异步数据并将其存储在useState中，无法使用值初始化useMemo -hook，因为尚未加载数据（因为我猜这两个钩子同时触发） . 所以 childRef 数组始终是一个空数组。

useMemo -hook 看起来像这样：

const childRefs = useMemo<any>(
    () =>
      Array(users.length)
        .fill(0)
        .map((i) => React.createRef()),
    []
  );

...并且创建的 childRefs 应该用作渲染函数中的 ref，如下所示：

{users.map((user, index) => (
  <div key={user.id}>
     <div ref={childRefs[index]}>{user.username}</div>
  </div>
))}

有什么想法可以在 useEffect之后运行 useMemo 以填充 childRefs-array 吗？ 我已经考虑过在执行 useMemo 之前设置一个短暂的超时时间，但我不知道该怎么做，这不是一个合适的解决方案。

非常感谢您的任何建议！

Answer 1

useEffect在您的组件渲染后运行，到那时您的 state 仍然是一个空数组。 如果你想使用备忘录钩子，你应该传递它的依赖关系以便它们正确反映给定你的用户 state：

const childRefs = useMemo<any>(
    () =>
      Array(users.length)
        .fill(0)
        .map((i) => React.createRef()),
    [users] //add dependencies
  );