在ReactJ中加入依赖项数组时，使用效率不运行一次

Question

我的问题是包括一个数组，即使使用使用效率也不会停止加载。其他问题不涵盖此主题；它们涵盖了相似但不同的方法。

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

现在，我只需要运行一次并且要显示的数据，但是当我将使用效果挂钩与依赖关系使用时（没有依赖关系，它不起作用），它开始连续运行，我可以在网络选项卡中看到它保留在不停止数据时获取数据。

我该如何修复此问题，即使它具有依赖关系数组，我该怎么做才能使我的使用效应仅运行一次。

这是我的代码：

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在保留状态时添加和删除UI部分。例如，当用户选项卡远离屏幕和背面时，React应该能够立即显示上一个屏幕。为此，反应将使用与以前相同的组件状态卸载并重新安装树。

此功能将为React应用程序提供更好的性能，但要求组件具有弹性，以使效果被多次安装和破坏。大多数效果将无需任何更改而起作用，但是有些效果认为它们仅安装或破坏一次。

正确的方法是跟踪它是否是第一个渲染，并将其用作执行代码效果的条件。这样，无论效果是否有零，一个或许多依赖关系都没关系。这是一个使用自定义钩子跟踪该状态的示例：

TS Playground

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;
}