Reactjs useeffect 函數運行兩次

Question

我不明白，有人可以幫我解決這個問題，為什么當我訪問“Hello”頁面/組件時，我的“randomFunc”中的console.log注銷數據兩次？ 是什么導致console.log第二次注銷？

應用程序.js

import { useState } from "react";
import { Switch, Route, Link } from "react-router-dom";
import Home from "./Home";
import Hello from "./Hello";

export default function App() {
  const [data, setData] = useState();

  const randomFunc = (dataFromHelloComponent) => {
    setData(dataFromHelloComponent);
    console.log(dataFromHelloComponent); /* <====  When I click "Go to Hello!" Link, this line log out data twice!? */
  };

  return (
    <div className="App">
      <Link to="/hello">Go to Hello!</Link>
      <Switch>
        <Route path="/" exact component={Home} />
        <Route
          path="/hello"
          render={(props) => (
            <Hello {...props} randomFunc={randomFunc} data={data} />
          )}
        />
      </Switch>
    </div>
  );
}

你好.js

import { useEffect } from "react";

export default function Hello({ randomFunc }) {
  useEffect(() => {
    randomFunc("Some random data!");
  }, [randomFunc]);

  return (
    <div className="hello">
      <h1>Hello World!</h1>
    </div>
  );
}

當我在 Hello.js 的“useEffect”依賴項中有“randomFunc”時，我在瀏覽器控制台中得到了這個：

一些隨機數據！

一些隨機數據！

如果我從 Hello.js 的“useEffect”依賴項中刪除“randomFunc”，我會在我的瀏覽器控制台中得到這個：

一些隨機數據！

React 警告：React Hook useEffect 缺少依賴項：'randomFunc'。 包括它或刪除它...

Answer 1

每次App呈現時，您都在重新創建randomFunc 。 因此函數不同，因此useEffect(..., [randomFunc])再次觸發。 您可以使用React.useCallback包裝randomFunc以便它始終返回相同的實際函數對象。