javascript - React hooks 函数依赖

Question

我发现自己处在一个奇怪的境地。我正在实现一个 Hook ，但我无法实现我想要的。

我有这样的东西:

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 是一个新数组，但是依赖于 foo 状态的 setBar 接收到一个空数组。基本上 setBar 在 setFoo 完成之前执行，因此 getBar 函数接收一个空数组。

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

谢谢，F.

Answer 1

TL;DR; 您的解决方案可能是 kind user 's answer

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

---

你说过:

My issue is that the function setFoo is properly executed, so foo state is a new array, but setBar that depends on the state of foo, receives an empty array. Basically setBar is executed before setFoo finished so the getBar function receives an empty array.

你说的对。主要是因为在 React 中(Hooks 和类组件)，setState是异步的。这是什么意思？这意味着 setSomething 只是告诉 React 稍后 重新渲染组件。它不会神奇地取代 const something当前运行函数中的变量——这是不可能的。

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
}

---

解决方案 1.

对您来说最简单的技术是存储新计算的值 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]);

---

解决方案2。

另一种技术可以在这里找到:https://stackoverflow.com/a/54120692/9787887正在使用 useEffect至 setBar与依赖列表的 foo .

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

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

尽管答案获得了 27 个赞成票，但我认为这只是使情况过于复杂，并且(据我所知)还应避免使组件不必要地重新渲染 2 次 而不是 1 次。

---

解决方案 3.

另一个可能有效的解决方案是使用 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]);

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

---

解决方案 4.

另一种解决方案 gaearon mentioned就是用 useReducer

• With Hooks you could also useReducer to centralize state update logic and avoid this pitfall.

他的另一个见解:

• the recommended solution is to either use one variable instead of two (since one can be calculated from the other one, it seems), or to calculate the next value first and update them both using it together. Or, if you're ready to make the jump, useReducer helps avoid these pitfalls.

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

---

解决方案 5.

最后的建议是a comment of gaearon , 告诉你重新思考你的状态依赖，状态依赖真的需要吗？

the best solution is simply to not have state that is calculated from another state. If this.state.y is always calculated from this.state.x, remove this.state.y completely, and only track this.state.x. And calculate what you need when rendering instead

---

感谢您耐心阅读到这里:))。