小编Fil*_*lta的帖子

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

我有这样的事情：

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。

我一直在尝试在反应组件上触发 onClick。如果我使用该事件会触发

<button onClick={()=>this.goToPage('next')}>Next Page</button>

如果我在无状态组件上使用相同的方法，它不会触发：

<PageButton onClick={()=>this.goToPage('next')}>Next Page</PageButton>

为什么这是不可能的？