时间戳

首页 > 解决方案 > 在 useEffect 钩子中，如何找出是什么事件触发了状态变化？

reactjs - 在 useEffect 钩子中，如何找出是什么事件触发了状态变化？

问题描述

我useEffect在更新状态后使用钩子来执行一些副作用。这工作得很好，每当子组件调用时setOptions，useEffect也会触发。
我试图弄清楚是否有一种方法可以区分谁更新了选项并在此基础上执行附加工作？更准确地说，我想useEffect仅当依赖项由特定组件更新时才调用另一个函数。这是我正在尝试做的一个愚蠢的例子： 

function App() {
  const [value, setValue] = useState({});
  const [options, setOptions] = useState([]);

  useEffect(() => {
    const newValues = await getNewValues();

    setValue(newValues);

    // If options have been changed from ChildComponentA
    // Then doSomething() else nothing
  }, [options]); 

  function doSomething() {}

  return(
      <>
        <ChildComponentA handleChange={setOptions} />
        <ChildComponentB handleChange={setOptions} />
      </>
  )
}

这个例子可能很奇怪，这只是我遇到的问题的一个例子。主要问题是状态可以被多个事件改变，我不知道是哪个事件触发了状态改变。

标签： reactjsreact-hooks

解决方案

也许您可以尝试向您的options变量添加一个附加参数，该参数会告诉您从何处触发更改，即options.child = 'A'，会告诉您它来自 A 并且您可以在 useEffect 中使用条件 as 进行检查，if (options.child == 'A')这当然需要options是一个对象而不是一个数组，并且在handleChange回调中你可以做类似的事情。

<ChildComponentA handleChange={(value) => {value.child ='A'; setOptions(value);}} />

更深入地说，作为个人建议，您的应用程序不应该旨在在同一状态下工作，如果它被一个地方或另一个地方改变，因为状态的主要目的之一是成为您组件中的通用真理来源并且每个使用它的子组件都这样对待它。

推荐阅读