使用 React Hooks 时如何避免两次获取数据

Question

我正在尝试从 Firestore 数据库中获取一组问题，然后将它们存储在本地数组中，以便稍后在测验中使用。当我正在努力获取数据时，它是异步运行的。我之前处理过这个问题，解决方案是 useEffect() 钩子和条件渲染组件。

我的代码目前如下所示：

var questions = [];
var collection = useRef('Planning');
var [loading, setLoading] = useState(true);  

useEffect(() => {
        if (props.track === 'Testing & Deployment') {
            collection.current = 'Test_Deploy';
        } else {
            collection.current = props.track;
        }

        if(questions.length !== 0){
            setLoading(false)
        } else {
            var questionSet = db.collection('Quizzes').doc(collection.current).collection('Questions')

            questionSet.withConverter(questionConverter).get().then(function(response) {
                    response.forEach(document => {
                        var question = document.data();
                        // running asynch - need to address
                        console.log('Question in')
                        questions.push(question)
                    })
            })
            setLoading(false)
        }

    }, [props.track, questions])}

根据setLoading() 所在的位置，组件要么根本不会重新渲染，要么会从 Firestore 中双重获取数据。我尝试使用 useCallback() 无济于事，并且还发现这可能是 React StrictMode 的问题。

关于如何修复我的代码以便在提取所有问题后重新呈现页面而不重复提取它们的任何建议？

Answer 1

要在组件挂载时获取一次数据，您可以指定一个空的依赖数组。我还建议将questions 对象移动到本地组件状态。由于状态是循环更新的，因此您应该使用功能状态更新将每个新问题添加到数组中。

const [questions, setQuestions] = useState([]);
const [loading, setLoading] = useState(true);

useEffect(() => {
  const questionSet = db
    .collection("Quizzes")
    .doc(collection.current)
    .collection("Questions");

  questionSet
    .withConverter(questionConverter)
    .get()
    .then(function (response) {
      response.forEach((document) => {
        const question = document.data();
        setQuestions(questions => [...questions, question]);
      });
    });

  setLoading(false);
}, []);

如果 linter 抱怨缺少依赖项，那么您需要添加它们并对数据获取进行适当的条件检查，或者添加注释以忽略/禁用具有依赖项数组 // eslint-disable-next-line react-hooks/exhaustive-deps 的行的 linter。

Answer 2

当道具改变或更新包括props.track和questions每次你推入它时它会重新渲染。所以如果你想摆脱它重新渲染然后从useEffect中删除就像

useEffect(() => {
        .......

}, [loading])} // remove from here and add `loading` here just