我的Reactjs程序一直在执行useEffect钩子，而我希望它只执行一次。

Question

​

import React, { useEffect } from "react";
import useHttp from "./hooks/use-http";

export default function App() {
  const getReq = async () => {
    const response = await fetch(
      "" // assume this to be a random link fetching data
    );
    const responseData = await response.json();
    return responseData;
  };

  const { sendRequest, data } = useHttp(getReq);

  useEffect(() => {
    sendRequest();
  }, []);

  console.log(data);

  return <div></div>;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

​

​

import React, { useState } from "react";

const useHttp = (getReq) => {
  const [data, setData] = useState([]);
  const sendRequest = async () => {
    try {
      const data = await getReq();
      setData(data);
    } catch (error) {}
  };

  return {
    sendRequest,
    data,
  };
};

export default useHttp;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

​

在useEffect钩子中，如果我将sendRequest作为依赖项删除(如本例中所做的)，则不会遇到任何问题，钩子只运行一次。

但是，如果我将其添加为依赖项(出于良好实践的目的)，钩子将持续运行，并得到重复的console.log语句。有人能解释一下为什么会发生这种事吗？

Answer 1

但是，如果我将其添加为依赖项(出于良好实践的目的)，钩子将持续运行，并得到重复的

语句。有人能解释一下为什么会发生这种事吗？

因为sendRequest是一个在组件被重新呈现时重新创建的函数，因此在每次呈现时它都是不同的。正因为如此，当它被列为依赖项时，useEffect会重新运行。考虑使用useCallback并使用它包装sendRequest。

考虑重新呈现一个与被重新调用的函数相同的组件，因此您正在从头创建它中的所有变量或函数(除了React在重新呈现时注意保留变量的值的情况；例如，状态变量会发生这种情况)。