useEffect在reactjs中包含依赖数组时没有运行一次

Question

我的问题是关于包括一个数组，即使使用useEffect时也不会停止加载。其他问题不包括这个主题;它们涵盖了相似但不同的方法。

我正在从我的firebasefirestore中获取数据并设置所需的数据。

现在我只需要数据运行一次并显示，但是当我使用useEffect钩子与依赖项(它不工作没有依赖项)，它开始连续运行，我可以在网络选项卡中看到，它不断获取数据不停止。

我怎么能解决这个问题，我能做些什么让我的useEffect只运行一次，即使它有一个依赖数组。

下面是我的代码:

import React, { Component, useEffect, useState, useCallback } from "react";
const [agentData, setAgentData] = useState([]);
const [agentID, setAgentID] = useState("");
const getSalesAgentInformation = async () => {
await firebase
.firestore()
.collection("Employees")
.where("employeeID", "==", agentID)
.get()
.then((snapshot) => {
const salesAgent = snapshot.docs.map((doc) => doc.data());
setAgentData(salesAgent);
});
};
useEffect(() => {
getSalesAgentInformation();
}, [agentData]);

Answer 1

来自React v18的发布说明:

在未来，我们希望添加一个功能，允许React在保留状态的情况下添加和删除UI的部分。例如，当用户从一个屏幕切换到另一个屏幕时，React应该能够立即显示上一个屏幕。要做到这一点，React将使用与以前相同的组件状态卸载和重新挂载树。

这个特性将给React应用带来更好的开箱即用性能，但需要组件能够适应多次加载和销毁效果。大多数效果不需要任何更改就可以工作，但有些效果只需要加载或销毁一次。

正确的方法是跟踪它是否是第一次渲染，并将其作为在效果中执行代码的条件。这样，效果的依赖关系是零、一个还是多个就无关紧要了。下面是一个使用自定义钩子跟踪该状态的示例:

TS操场

import {useEffect, useRef} from 'react';
function useIsFirstRender () {
const ref = useRef(true);
if (ref.current) {
ref.current = false;
return true;
}
return false;
}
function Component () {
const isFirstRender = useIsFirstRender();
useEffect(() => {
// If it's not the first render, return early from the function
if (!isFirstRender) return;
// else, do other things...
console.log('First render');
});
return null;
}