Локальный элемент React не обновляется?

#reactjs #firebase #react-component

#reactjs #firebase #реагирующий компонент

Вопрос:

У меня есть компонент, который имеет локальную переменную

   let endOfDocument = false;

И у меня есть функция бесконечной прокрутки в моем useEffect

 useEffect(() => {
const { current } = selectScroll;
current.addEventListener('scroll', () => {
  if (current.scrollTop   current.clientHeight >= current.scrollHeight) {
    getMoreExercises();
  }
});
return () => {
  //cleanup
  current.removeEventListener('scroll', () => {});
};
}, []);

В моей функции getMoreExercises я проверяю, достигли ли мы последнего документа в firebase

 function getMoreExercises() {
 if (!endOfDocument) {
  let ref = null;
  if (selectRef.current.value !== 'All') {
    ref = db
      .collection('exercises')
      .where('targetMuscle', '==', selectRef.current.value);
  } else {
    ref = db.collection('exercises');
  }
  ref
    .orderBy('average', 'desc')
    .startAfter(start)
    .limit(5)
    .get()
    .then((snapshots) => {
      start = snapshots.docs[snapshots.docs.length - 1];

      if (!start) endOfDocument = true; //Here

      snapshots.forEach((exercise) => {
        setExerciseList((prevArray) => [...prevArray, exercise.data()]);
      });
    });
}
}

И когда я меняю параметры на другую категорию, я обрабатываю это с помощью метода onChange

   function handleCategory() {
    endOfDocument = false;
    getExercises();
  }

Я делаю это, поэтому, когда мы меняем категории, список будет сброшен, и он больше не будет концом документа. Однако переменная endOfDocument не обновляется, и функция getMoreExercise всегда будет иметь значение endOfDocument true, как только оно будет установлено в true. Я не могу изменить его позже. Буду признателен за любую помощь.

1. Локальные переменные не сохраняются между рендерами. Вам нужно сделать его с учетом состояния useState .

2. Я пробовал это, и, хотя состояние изменится на true, при проверке endOfDocument «if (!endOfDocument)», оно по какой-то причине все равно будет false при вызове моей функции getMoreExercise . Если это имеет смысл

Ответ №1:

Как упоминал @DevLoverUmar, это было бы правильно обновлено, но поскольку endOfDocument в основном никогда не используется для «рендеринга» чего-либо, а просто состояния, которое используется в эффекте, я бы вместо этого поместил его в a useRef , чтобы уменьшить ненужные повторные запросы.

1. Могу я спросить, как вы это сделаете?

2. Спасибо, я достиг своей цели, используя useRef. пусть endOfDocument = useRef(false); и изменение значений с помощью endOfDocument.current = true или false в зависимости от ситуации.

Ответ №2:

Предполагая, что вы используете setExerciseList в качестве переменной перехвата react useState. Вы должны использовать useState для endOfDocument, а также предложенный Брайаном Томпсоном в комментарии.

 import React,{useState} from 'react';
const [endOfDocument,setEndOfDocument] = useState(false);

function handleCategory() {
    setEndOfDocument(false);
    getExercises();
  }