React UseEffect 被调用两次

Question

我在 FC 组件中有以下代码：

我只想在安装组件时调用 Api 并记录信息

console.log 为空数组被调用两次，为设置相同的值而被调用两次。

import * as React from"react";
import Header from"../components/Header";
import Search from"../components/Search";
import Categories from"../components/Categories";
import Carousel from"../components/Carousel";
import CarouselItem from"../components/CarouselItem";
import Footer from"../components/Footer";
import "../assets/styles/App.scss";

const App = () => {
  const [videos, setVideos] = React.useState([]);

  React.useEffect(() => {
    fetch("http://localhost:3000/initalState")
      .then((response) => response.json())
      .then((data) => setVideos(data));
  }, []);

  console.log(videos);
  return (
    <div className="App">
      <Header></Header>
      <Search></Search>

      <Categories title="Mi Lista">
        <Carousel>
          <CarouselItem />
          <CarouselItem />
          <CarouselItem />
          <CarouselItem />
          <CarouselItem />
        </Carousel>
      </Categories>

      <Categories title="Tendencias">
        <Carousel>
          <CarouselItem />
          <CarouselItem />
        </Carousel>
      </Categories>

      <Categories title="Originales de Platzi Video">
        <Carousel>
          <CarouselItem />
        </Carousel>
      </Categories>

      <Footer />
    </div>
  );
};

export default App;

但是，我得到了以下输出：

在 useEffect 中调用：

  React.useEffect(() => {
    fetch("http://localhost:3000/initalState")
      .then((response) => response.json())
      .then((data) => {
        setVideos(data);
        console.log(videos);
      });
  }, []);

返回一个空数组。

Answer 1

我刚刚意识到我在严格模式下渲染 App，它会调用一些事件两次：

严格模式无法自动为您检测副作用，但它可以通过使它们更具确定性来帮助您发现它们。这是通过有意重复调用以下函数来完成的：

类组件构造函数、render 和 shouldComponentUpdate 方法 类组件静态 getDerivedStateFromProps 方法 函数组件主体 状态更新器函数（setState 的第一个参数） 传递给 useState、useMemo 或 useReducer 的函数

我有这个：

ReactDOM.render(

  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById("root")
);

现在

ReactDOM.render(<App />, document.getElementById("root"));

解决了。