问只触发一定条件的useEffect
EN

Stack Overflow用户

提问于 2020-10-09 10:43:12

回答 2查看 1.4K关注 0票数 0

我对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**，，那么是否真的无法使用中的函数/变量？

javascript

reactjs

typescript

use-effect

回答 2

Stack Overflow用户

发布于 2020-10-09 10:49:47

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

相反，您的还原器将有您可以使用的照片的旧值，您只需将新的请求数据传递给您的还原程序。

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

票数 1

Stack Overflow用户

发布于 2020-10-11 13: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"));