Reactjs 使用React钩子时如何避免两次获取数据

我试图从Firestore数据库中获取一组问题，然后将它们存储在本地数组中，以便稍后在测验中使用。在我提取数据时，它是异步运行的。我以前已经处理过这个问题，解决方案是一个

useffect（）

hook和条件渲染组件

我的代码当前如下所示：

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

的问题

---

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

当道具更改或更新时，它将再次重新呈现，包括

道具。每次将项目推入页面时，跟踪
和
问题
。因此，如果您想摆脱它，只需从
useffect
like中删除即可

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

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

要在组件装载时提取数据，可以指定一个空的依赖项数组。我还建议将
问题
对象移动到本地组件状态。因为状态是在循环中更新的，所以应该使用函数状态更新将每个新问题添加到数组中

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抱怨缺少依赖项，那么您需要添加它们并对数据获取进行适当的条件检查，或者添加注释以忽略/禁用依赖项数组行的linter，
//eslint disable next line react hooks/deps
FYI，
问题
将在每个渲染周期重置回空数组
[]
。它应该是组件状态的一部分。你的问题真的是关于在组件挂载时一次性获取数据吗？是的，这可能是问题的核心。在此之前，我曾尝试使用类组件，但发现很难更新状态数组。仅将加载放在括号中仍会发出缺少依赖项的警告。恐怕我误解了你的更正。这正是我需要做的。谢谢你，德鲁！