只触发一定条件的useEffect
我对useEffect有基本的理解。如果没有第二个参数(依赖数组)，它将在每个呈现上运行。对于空数组，它在第一次呈现时运行。对于数组中的参数，每当某些参数发生更改时，它都会运行。
假设我的useEffect有两个依赖项(来自GraphQL查询)：result.data和result.loading。我希望useEffect在result.data更改时运行，而result.loading是假的。例如，目的是更新Redux存储：
useEffect(() => {
if (result.loading) return;
dispatch(updatePhotos([...photos, ...result.data.photos]));
}, [result.data, result.loading]);但是有一个问题:我必须包括photos来列出依赖项。但是，photos变量将在其他地方更新，并再次触发此useEffect。
，只有当这两个变量发生变化时，我才能运行useEffect？
当然，我可以使用useState存储变量resultFetched，将其设置为useEffect中的true，然后只有当变量为false时才进行分派。但是在某种程度上，我必须将其更改为true，useEffect再次运行，因为我无法手动更改result.data或result.loading。
当有很多变量需要处理时，我不知道如何在这些情况下正确地使用useEffect。
目前，我正在构建无限滚动照片列表，其中列表是通过GraphQL部分加载的。但是当用户打开一些照片并最终返回到照片列表时，它将从Redux还原到与打开照片之前相同的状态和滚动位置。
我花了无数个小时来努力让它发挥作用，但这种使用效果的东西破坏了我的每一次尝试。)它们总是在我希望它们触发之前被触发，因为有太多的变化变量。
此外，有时我希望在useEffect (添加到依赖数组中的函数)中运行一个函数，并使用useCallback对该函数进行回溯。但是，我还必须将函数使用的所有变量添加到该useCallback的依赖数组中，以便在这些变量发生变化时重新生成函数。这意味着useEffect突然再次运行，因为依赖数组中的函数会发生变化。
如果没有函数/变量触发** useEffect**，，那么是否真的无法使用中的函数/变量？
回答 2
Stack Overflow用户
发布于 2020-10-09 18:49:47
这完全取决于updatePhotos的工作方式。如果这会创建一个操作，那么问题是您在错误的位置创建了新的状态。这里不应该使用照片的先前值，因为正如您所指出的，这会导致依赖关系。
相反，您的还原器将有您可以使用的照片的旧值，您只需将新的请求数据传递给您的还原程序。
在这里详细描述：https://overreacted.io/a-complete-guide-to-useeffect/#decoupling-updates-from-actions
Stack Overflow用户
发布于 2020-10-11 21:28:56
您可以在同一个组件中拥有两个独立的useEffect函数，它们将相互独立地工作。使用一个用于照片，另一个用于加载数据。我希望这个例子能帮助你了解这件事。
import React, { useState, useEffect } from "react";
import ReactDOM from "react-dom";
function App() {
const [count, setCount] = useState(0);
const [count2, setCount2] = useState(0);
const [step, setStep] = useState(1);
useEffect(() => {
const id = setInterval(() => {
setCount((c) => c + step);
}, 1000);
return () => clearInterval(id);
}, [step]);
useEffect(() => {
const id = setInterval(() => {
setCount2((c) => c + step);
}, 1500);
return () => clearInterval(id);
}, [step]);
return (
<div>
<h1>{count}</h1>
<h1>{count2}</h1>
<input value={step} onChange={(e) => setStep(Number(e.target.value))} />
</div>
);
}
ReactDOM.render(<App />, document.getElementById("container"));请参阅沙箱https://codesandbox.io/s/react-playground-forked-6h0oz中的示例
https://stackoverflow.com/questions/64285661
复制相似问题
腾讯云开发者
