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

【问题标题】：React use useMemo-hook after useEffect-hook在 useEffect-hook 之后反应使用 useMemo-hook
【发布时间】：2021-08-02 05:47:22
【问题描述】：

我需要访问 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-array 总是一个空数组。

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>
))}

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

非常感谢您的建议！

【问题讨论】：

标签： reactjs react-hooks

【解决方案1】：

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

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

【讨论】：