时间戳

首页 > 解决方案 > 仅在特定条件下触发 useEffect

javascript - 仅在特定条件下触发 useEffect

问题描述

我对useEffect有基本的了解。如果没有第二个参数（依赖数组），它会在每个渲染上运行。使用空数组，它在第一次渲染时运行。使用数组中的参数，它会在某些参数更改时运行。

假设我有两个依赖项（来自 GraphQL 查询）的 useEffect：result.data和result.loading. result.data如果更改，我希望 useEffect 运行，并且result.loading是错误的。目的是例如更新 Redux 存储：

useEffect(() => {
  if (result.loading) return;
  dispatch(updatePhotos([...photos, ...result.data.photos]));
}, [result.data, result.loading]);

但是有一个问题：我必须包含photos依赖项列表。但是，photos变量将在其他地方更新，并再次触发此 useEffect。

只有当这两个变量发生变化时，我才能运行 useEffect 吗？

我当然可以使用 useState 来存储变量resultFetched，将其设置为trueuseEffect ，然后仅在它存在时才调度false。但在某些时候，我必须将其改回true，然后 useEffect 再次运行，因为我无法手动更改result.data或result.loading。

当有很多变量要处理时，我不知道如何在这些情况下正确使用 useEffect 。

目前我正在构建无限滚动照片列表，其中列表通过 GraphQL 部分加载。但是当用户打开一些照片并最终返回照片列表时，它会从 Redux 恢复到与打开照片之前相同的状态和滚动位置。

我花了无数个小时试图让它工作，但是这个 useEffect 东西破坏了我的每一次尝试。:) 它们总是在我希望它们触发之前被触发，因为有太多变化的变量。

此外，有时我想在useEffect（添加到依赖数组的函数）中运行一个函数，并使用useCallback该函数来记忆它。但是我还必须将函数使用的所有变量添加到 that 的依赖数组中useCallback，因此当这些变量发生变化时，函数会重新生成。这意味着useEffect突然再次运行，因为依赖数组中的函数发生了变化。

真的没有办法在useEffect没有它们触发的情况下使用函数/变量useEffect吗？

标签： javascriptreactjstypescriptuse-effect

解决方案

这完全取决于 updatePhotos 的工作方式。如果这会创建一个动作，那么问题是您在错误的位置创建新状态。照片的先前值不应在此处使用，因为正如您所指出的，这会导致依赖。

相反，您的 reducer 将拥有您可以使用的旧照片值，您只需将新的请求数据传递给您的 reducer。

这里有更详细的描述：https ://overreacted.io/a-complete-guide-to-useeffect/#decoupling-updates-from-actions

推荐阅读