反应本地元素不更新？

Question

我有一个具有局部变量的组件

  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 变量不会更新，一旦设置为 true，getMoreExercise 函数的 endOfDocument 值将始终为 true。我以后无法更改它。任何帮助将不胜感激。

Answer 1

假设您使用 setExerciseList 作为反应 useState 挂钩变量。您应该将 useState 用于 endOfDocument 以及 Brian Thompson 在评论中的建议。

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

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

Answer 2

正如@DevLoverUmar 提到的那样，它会正确更新，但是由于 endOfDocument 基本上从不用于“渲染”任何东西，而只是用于效果的状态，所以我会将其放入 useRef 中以减少不必要的重新渲染。

反应本地元素不更新？

React local element not updating?

firebase

reactjs

react-component