React钩子函数依赖

Question

我发现自己处于一种奇怪的境地。我正在实现一个钩子，我无法实现我想要的。

我有这样的想法：

const appHook = props => {
  const [foo, setFoo] = React.useState([]);
  const [bar, setBar] = React.useState([]);

  React.useEffect(() => {
    setFoo(getFoo(props.fooList, props.fooId));
    setBar(getBar(foo.listToFilter));
  }, [props.fooId]);

  const getCurrentBlockTrade = (arrayToFilter, number) =>
    arrayToFilter.filter(array => array.id === number);

  const getSubOutList = (...) => {
   ...
  };

return (<div>something</div>)
}

我的问题是函数setFoo正确执行，所以foo state是一个新的数组，但是setBar依赖于foo的状态，接收一个空数组。基本上setBar是在setFoo完成之前执行的，所以getBar函数接收一个空数组。

管理这种依赖的正确方法是什么？

谢谢F

Answer 1

setState是一个异步函数，这就是为什么在setBar函数中接收到一个空数组的原因。基本上，您不能确定状态是否会在第二个setState计算之前更新。

为什么不在这两种情况下简单地参考道具呢？

React.useEffect(() => {
   const newFoo = getFoo(props.fooList, props.fooId);

   setFoo(newFoo);
   setBar(getBar(newFoo.listToFilter));
}, [props.fooId]);

Answer 2

设置状态是一个异步过程。SosetBar（getBar（foo.listToFilter）） 调用此foo的是空数组。您可以为此使用另一个useEffect

 React.useEffect(() => {
    setFoo(getFoo(props.fooList, props.fooId));
  }, [props.fooId]);



 React.useEffect(() => {
    setBar(getBar(foo.listToFilter));
 }, [foo]);

Answer 3

TL；博士您的解决方案可能是善良用户的回答

下面我将描述到目前为止我在整个研究中的想法和学到的东西，并通过博客从人们那里提出5条建议/解决方案，。。。

你说过：

我的问题是函数setFoo正确执行，所以foo state是一个新的数组，但是setBar依赖于foo的状态，接收一个空数组。基本上setBar是在setFoo完成之前执行的，所以getBar函数接收一个空数组。

你说得对。基本上是因为在React（钩子和类组件）中，setState是异步的。这是什么意思？这意味着setSomething只是告诉React稍后重新渲染组件。它不会神奇地替换当前运行函数中的constsomething变量，这是不可能的。

const [foo, setFoo] = useState(0)

function handleClick() {
  setFoo(42) 
  // we declared foo with const, you "obviously" shouldn't expect this 
  // to "somehow" immediately change `foo` to 42

  console.log(foo); 
  // it's 0 in this render, BUT on next render, `foo` will be 42
}

最简单的方法是将新计算的foo值存储在变量中，然后将新计算的值同时用于setFoo和setBar，这是一种非常流行的方法。

React.useEffect(() => {
   const newFoo = getFoo(props.fooList, props.fooId);

   setFoo(newFoo);
   setBar(getBar(newFoo.listToFilter));
}, [props.fooId]);

// or: shouldn't use this, only to demonstrate the callback syntax in 
// the new setState Hook (different than the old callback syntax setState):
React.useEffect(() => {
   setFoo(() => {
       const newFoo = getFoo(props.fooList, props.fooId);
       setBar(getBar(newFoo.listToFilter));
       return newFoo;
   })
}, [props.fooId]);

另一种技术可以在这里找到：https://stackoverflow.com/a/54120692/9787887 正在对其foo的依赖项列表使用useffect到setBar。

React.useEffect(() => {
    setFoo(getFoo(props.fooList, props.fooId));
}, [props.fooId]);

React.useEffect(() => {
    setBar(getBar(foo.listToFilter));
}, [foo]);

尽管答案得到了27张赞成票，但我认为这只是使情况变得过于复杂，而且（正如我所知）不必要地使组件重新加载2次而不是1次，应该避免。

另一个可行的解决方案是使用async/await使状态更改以异步方式触发，从而使更改不会成批进行（关于此答案）https://stackoverflow.com/a/53048903/9787887)

React.useEffect(async () => {
   await setFoo(getFoo(props.fooList, props.fooId));
   await setBar(getBar(foo.listToFilter));
}, [props.fooId]); 
// no, actually this will not work!! it'll throw you an (annoyed) error

// the actual working code is:
React.useEffect(() =>
   const setFooAndBar = async () => {
       await setFoo(getFoo(props.fooList, props.fooId));
       await setBar(getBar(foo.listToFilter));
   }
   setFooAndBar();
}, [props.fooId]);

你看，工作代码又是另一个过于复杂（糟糕）的解决方案（但无论如何都应该引入？？）。

gaearon提到的另一个解决方案是使用useReduer

• 使用钩子，您还可以使用useReducer来集中状态更新逻辑并避免这个陷阱

另一个例子是他的见解：

• 推荐的解决方案是要么使用一个变量，而不是两个（因为一个可以从另一个计算，似乎），要么先计算下一个值，然后一起使用它来更新它们。或者，如果你已经准备好跳跃，使用减速机有助于避免这些陷阱。

但这似乎又是另一个过于复杂的建议，不是吗？

最后一个建议是gaearon的评论，告诉你重新思考你的状态依赖，状态依赖真的需要吗？

最好的解决方案就是不要有从另一个状态计算出来的状态。如果总是根据此.state.x计算此.state.y，则完全删除此.state.y，并且只跟踪此.state.x。并计算渲染时需要的内容

谢谢你有足够的耐心读到这里：））。