Question

我制作了一个自定义钩子，以使用异步钩子和用于处理页码的钩子来调用我的api。

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

“下一步”按钮应增加页码计数器，然后调用异步钩子的提取功能

当我天真地执行此操作时，先增加计数器，然后在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
    </>
}

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

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

如何根据前一个结果调用多个挂钩函数

1 个答案: