Как вызвать несколько функций ловушки в зависимости от результата предыдущей - PullRequest
Новая
       2

Как вызвать несколько функций ловушки в зависимости от результата предыдущей

0 голосов
/ 20 июня 2019

Я сделал пользовательский хук для вызова моего API с помощью асинхронного хука и хука, обрабатывающего номер страницы.

Кнопка «начать» сделать первый вызов API,

кнопка «Далее» должна увеличивать счетчик номера страницы, а затем вызывать функцию выборки асинхронного хука

Когда я делаю это наивно, увеличивая счетчик, затем вызывая выборку в функции 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
    </>
}

В основном, как мне сделать так, чтобы вызывать функции перехвата множественных значений и убедиться, что соответствующее значение предыдущего обновлено перед вызовом следующего?

1 Ответ

1 голос
/ 20 июня 2019

Согласно моему комментарию на ваш вопрос:

Вы можете реструктурировать свой код в нечто подобное.

Обновите некоторую переменную через кнопку с помощью вызова inc() и переместите ваш вызов fetch() на useEffect, который выполняется на основе изменения этой переменной. Например, эта переменная может быть pageNumber. 

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

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

        //... display results

    </React.Fragment>
  );
}
...