一个获取请求在服务器上创建多个 GET 请求

Question

这是我的代码：

import React from "react";
import { useState, useEffect } from "react";
import TutorialList from "./TutorialList";
import PropTypes from "prop-types";

const Home = () => {
  const [tutorials, setTutorials] = useState(null);

  useEffect(() => {
    console.log("Fetching data");
    fetch("http://192.168.212.52:8080/api/tutorials/all/")
      .then((res) => {
        return res.json();
        console.log("Getting json from response");
      })
      .then((data) => {
        console.log(data);
        setTutorials(data);
      });
  }, []);

  return (
    <div className="home">
      {console.log(tutorials)}
      {tutorials && (
        <TutorialList tutorials={tutorials} title={"All tutorials"} />
      )}
    </div>
  );
};
Home.propTypes = {
  title: PropTypes.string,
};
export default Home;

我希望这会向服务器发出 1 个获取请求，其中 returns 数据然后用 react 渲染。

它实际上做的是赚了10多个向服务器请求，在 all 个请求之后仍然呈现数据结束。我可以看到来自服务器日志和浏览器的请求网络开发工具。

但是，Fetching data 和 Getting json from response 日志只执行一次，如预期。

Answer 1

由于 fetch 从网络请求资源，它运行是异步的。这就是说，如果你想在 useEffect 中到达运行它可能是，如果你将它包装在 async function 中它应该可以工作。但是，请记住，它不是此挂钩本身的参数 async 而是您在其中定义的另一个函数。例如，

useEffect(() => {
    console.log("Fetching data");
    async function retrieveData() {
      const json = await fetch("http://192.168.212.52:8080/api/tutorials/all/")
      const data = await response.json()
      setTutorials(data)
      console.log("Got json from response");
    }
    retrieveData()
  }, []);

一个获取请求在服务器上创建多个 GET 请求

One fetch request creates many GET requests on server

javascript

fetch

node.js

express

reactjs