javascript - 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

我刚刚意识到我正在以严格模式渲染应用程序，两次调用某些事件:

Strict mode can’t automatically detect side effects for you, but itcan help you spot them by making them a little more deterministic.This is done by intentionally double-invoking the following functions:

Class component constructor, render, and shouldComponentUpdate methodsClass component static getDerivedStateFromProps method Functioncomponent bodies State updater functions (the first argument tosetState) Functions passed to useState, useMemo, or useReducer

我有这个:

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

现在

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

解决了。