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

Question

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

一个按钮 "begin" 进行第一个 api 调用，

一个按钮 "next" 应该增加页码计数器然后调用异步钩子的获取函数

当我天真地这样做时，递增计数器然后在函数 onClick 中调用提取，当然 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
    </>
}

基本上我该怎么做才能调用多个钩子函数并确保在调用下一个之前更新前一个的关联值？

Answer 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>
  );
}

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

How to call multiple hook functions depending on the result of the previous one

reactjs

react-hooks