Reactjs 中的 Axios 和 fetch 都在发出连续的本地主机网络请求

Question

这是来自 express 后端和 MongoDB 数据库的路由代码以及来自前端的正常调用 fetch("/") 它返回 index.html 代码并且添加 fetch("http://localhost:9000") 它是返回 CORS 错误所以我添加了 app.use(cors()).

router.get("/", async (req, res) => {
  Journal.find({}, function (err, journals) {
    if (err) {
      res.send("Something went wrong");
    }
    res.json(journals);
  });
});

这是从 reactjs 前端发出的 axios 和 fetch 请求，在后端对“/”进行 fetch 和 axios 调用时没有任何反应，只有 index.html 代码被返回，所以我开始使用"http://localhost:9000" 然后数据来了但是这个本地主机问题出现了。

const [journals, setJournals] = useState([
    { title: "Day 1", content: content_string },
  ]);

  useEffect(() => {
    getJournalData();
  });

  // const getJournalData = async () => {
  //   try {
  //     const res = await fetch("http://localhost:9000/");

  //     const data = await res.json();

  //     setJournals(data);
  //     console.log(data);
  //   } catch (err) {
  //     console.error(err);
  //   }
  // };

  const getJournalData = () => {

    axios
      .get("http://localhost:9000/")
      .then((res) => {
        setJournals(res.data);
      })
      .catch((err) => console.error(err));
  };

这是 chrome-dev-tools 网络选项卡：

控制台内容

React 正在 localhost:3000 Express 正在 locahost:9000

proxy:http://localhost:9000 添加到 package.json in frontend react app

请告诉我出现了什么问题以及如何修复它。谢谢

Answer 1

在不使用依赖项数组的情况下，每次更改都会再次触发您的 useEffect 到运行。

因此每次重新渲染、每次更改状态都会导致您创建另一个 Api 调用。

我们来谈谈变体 useEffect：

useEffect(() => {
  // invoking on every re-render
})

useEffect(() => {
  // invoking on component did mount (once)
}, [])

useEffect(() => {
  // invoking on component did mount and with every change on counter
}, [counter])

所以，更改您的代码：

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

Reactjs 中的 Axios 和 fetch 都在发出连续的本地主机网络请求

Axios and fetch both in Reactjs are making continuous localhost network request

javascript

mongodb

express

reactjs

mern