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

【问题标题】：In useEffect hook, how to find out what event triggered state change?在 useEffect 钩子中，如何找出是什么事件触发了状态变化？
【发布时间】：2020-11-26 02:50:09
【问题描述】：

我正在使用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} />
      </>
  )
}

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

【问题讨论】：

标签： reactjs react-hooks

【解决方案1】：

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

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

更深入一点，作为个人建议，您的应用不应旨在在同一状态下因某个地方或另一个地方发生变化而有所不同，因为该状态的主要目的之一是成为普遍的事实来源在你的组件中，并且每个使用它的子组件都这样对待它。

【讨论】：