如何根据前一个的结果调用多个钩子函数答案

【问题标题】：How to call multiple hook functions depending on the result of the previous one如何根据前一个的结果调用多个钩子函数
【发布时间】：2019-06-20 10:22:32
【问题描述】：

我制作了一个自定义挂钩来调用我的 api，其中包含一个异步挂钩和一个处理页码的挂钩。

“开始”按钮进行第一次 api 调用，

“下一步”按钮应该增加页码计数器，然后调用异步挂钩的 fetch 函数

当我天真地这样做时，递增计数器然后在函数 onClick 中调用 fetch，当然 api 调用是在计数器递增之前进行的

import { useCounter, useAsyncFn } from 'react-use'

const useCallApi = _ => {
    const [pageNumber, {inc}] = useCounter(0)
    const [results, fetch] = useAsyncFn(apiCall({pageNumber: pageNumber}), [pageNumber])
    return {
        results,
        fetch,
        inc
    }
}

const App = _ => {
    const {results, fetch, inc} = useCallApi()

    return <>
        <Button onClick={fetch}>begin</Button>
        <Button
          onClick={_ => {
            inc()
            fetch()  //of course it is not working
          }}
        >next</Button>

        //... display results
    </>
}

基本上如何调用多个钩子函数并确保在调用下一个之前更新前一个的关联值？

【问题讨论】：

也许您可以在单击后仅执行inc()，并将fetch() 部分移动到useEffect(()=>fetch(),[pageNumber])，在pageNumber 更新时运行。
@cbdev420 谢谢，我希望有更通用的东西，因为我在更复杂的情况下遇到了同样的问题，但在这种情况下效果很好
所提出的解决方案适用于需要对状态变化做出反应的任何情况。不知道有没有比这更笼统的了
@AvinKavish 你说得对，我在其他用例中尝试过，它有效，唯一的缺点是它使代码流的可读性降低

标签： reactjs react-hooks

【解决方案1】：

根据我对您问题的评论：

您可以将代码重组为类似的内容。

使用inc() 调用通过按钮更新一些变量，并将您的fetch() 调用移动到基于该变量更改运行的useEffect。例如，该变量可以是 pageNumber。

  useEffect(()=>{
    fetch()
  },[pageNumber]);

  return(
    <React.Fragment>
      <Button onClick={fetch}>begin</Button>
      <Button onClick={inc}>next</Button>

        //... display results

    </React.Fragment>
  );
}

【讨论】：