Блог

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

Например, последнее значение страницы равно 1, когда 3. Выполняется щелчок, и он должен работать как 1 в getReports, но работает 3. Следующий — 1, но мне нужен этот момент.

 const onClick = () => {
    setReports([]);
    setPage(1);
    getReports(); <- use page and reports list
}
  

Быстрое решение: получить предыдущее значение, увеличить его и обновить состояние этим новым значением. В следующей строке передайте то же увеличенное значение в качестве аргумента getReports(new Value) . Здесь мы будем использовать состояния только для сохранения последнего номера / индекса.

Но если вы хотите использовать только состояния, тогда вам не getReports() следует сразу вызывать, вместо этого вы можете использовать useEffect для прослушивания изменений состояния, а затем вызывать метод при изменении. Что-то вроде:

 const [page, setPage] = React.useState(0);

  React.useEffect(() => {
    getReports();
  }, [page]);

 const onClick = () => {
    setReports([]);

    setPage(1);

    // If page number is always incrementing
    setPage(page 1);
 }
  

Установка состояния в React является асинхронной. Это связано с тем, что он повторно отображает dom (или его части), и любой код после setState (или перехват) будет продолжать выполняться в обычном режиме. Забудьте о async await в том, что касается настройки состояния.

В вашем примере я должен просто передать номер страницы в функцию getReports. Насколько я могу судить, нет необходимости удерживать число в состоянии. Кроме того, вызов setReports([]) выглядит так, как будто он тоже не нужен, поскольку getReports должен, я полагаю, перезаписать его в любом случае.