Почему моя функция не может прочитать фактическое значение состояния моего компонента?

Почему моя функция не может прочитать фактическое значение состояния моего компонента?

Для школьного проекта моя группа строит таблицу, которая заполнена данными города через вызов базы данных. Скелет таблицы-компонента таков:

 import React, { useState } from 'react' function Table(props) { const [ cities, setCities ] = useState([]) const [ pageNum, setPageNum ] = useState(0) useEffect(()={amp}gt; { // this sets up the listener for the infinite scroll document.querySelector(".TableComponent").onscroll = () ={amp}gt; { if (Math.ceil(table.scrollHeight - table.scrollTop) === table.clientHeight) showMoreRows() } //initial fetch fetchData(0) },[]) async function showMoreRows() { console.log("Show more rows!") await fetchData(pageNum) } async function fetchData(page) { // some code, describing fetching // EDIT2 start console.log(pageNum) // EDIT2 end const jsonResponse = await {}// THE RESPONSE FROM THE FETCH if(page) { setCities([...cities, ...jsonResponse]) console.log("page is true", page) setPageNum(pageNum   1) } else { console.log("page is false", page) // this always runs and prints "page is false 0" setCities([...cities, ...jsonResponse]) setPageNum(1) } } return {amp}lt;div className="TableComponent"{amp}gt; { pageNum } {amp}lt;!-- The rest of the component --{amp}gt; {amp}lt;/div{amp}gt; } 

Таблица имеет функцию «бесконечной прокрутки», поэтому, когда вы прокручиваете страницу до конца, она печатает "Show more rows!" и запускает fetchData(pageNum) чтобы получить больше данных. В этот момент после начальной выборки pageNum pageNum должна быть 1 или более, но по какой-то причине функция действует так, как будто она равна 0. Я выставил pageNum pageNum на дисплее в JSX, и я вижу, что она равен 1 , но он все равно печатает "page is false 0" когда я его запускаю.

Когда я пытаюсь решить проблему, похоже, единственное, что может случиться, это то, что я пытаюсь прочитать переменную useState слишком рано после использования setPageNum (до перерисовки), но, насколько я вижу, дело обстоит иначе. , Я даю ему много времени между попытками, и он всегда говорит, что pageNum равен нулю.

Любые идеи относительно того, что я делаю неправильно, и как это имеет смысл в любом случае?

Спасибо за любую помощь!

РЕДАКТИРОВАТЬ: Только что попробовал код, который я переписал, и он, кажется, работает — однако полный код, который я имею, не работает. У кого-нибудь есть идеи по поводу проблем, связанных с этим, даже если приведенный выше код может работать?

EDIT2: я добавил console.log(pageNum) в fetchData и немного протестировал, и кажется, что все, что я помещаю в начальное значение в useState(VALUE) — это то, что печатается. Это не имеет смысла для меня. Помогите.

EDIT3: добавлено ожидание, уже было в реальном коде

РЕДАКТИРОВАТЬ 4: Я пытался это сделать некоторое время, но понял, что с помощью команды реагировать я могу переместить прослушиватель прокрутки, который у меня есть, в область JSX, и тогда это сработало — по какой-то причине. Теперь это работает. Не могу пометить ответы как правильные, но проблема в некоторой степени решена.

Спасибо всем, кто пытался помочь, очень ценю это.

Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector