一些获取的 url 在 react useEffect 中触发重新加载答案

【问题标题】：Some fetched urls trigger reload in react useEffect一些获取的 url 在 react useEffect 中触发重新加载
【发布时间】：2021-05-02 09:06:17
【问题描述】：

我有一个带有 useEffect 钩子的基本反应组件

import React, { useEffect } from 'react';
import ReactDOM from 'react-dom';

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

function App() {
   useEffect(() => {
      fetch('http://localhost:9000/api/v1/stuff');
   }, []);

   return (
      <main>
         Test
      </main>
   );
}

没有什么特别之处。它只是像显示的那样获取并且什么都不做。

奇怪的是，一些像所示的 url 会触发页面重新加载循环，而不会引发错误。像https://jsonplaceholder.typicode.com/todos/1 这样的网址可以正常工作。

我尝试了上面看到的fetch 方法，以及XMLHttpRequest。结果是一样的。

关于第一个网址：

它是为了防止 cors 错误而存在的反向代理，同时在本地使用其他 API。
它发送 JSON 数据，我们可以在页面重新加载之前简要看到这些数据。

很遗憾，我无法向您展示重现此错误的示例设置。

我认为 React.useEffect 对这种行为负有某种责任，因为它在不使用 react 的情况下工作。我找不到有关此问题的任何信息。很高兴知道是什么原因造成的以及如何预防。

应用程序在http://localhost:3000/build之类的网址上运行

亲切的问候

编辑： github问题：https://github.com/facebook/react/issues/20683

【问题讨论】：

标签： reactjs fetch use-effect

【解决方案1】：

我找到了这种行为的罪魁祸首。我正在使用 vscode 进行开发，并在那里使用 Ritwick Dey 的“Live Server”在本地托管构建，没有太多麻烦。

此 Live Server 触发页面重新加载。这就是为什么我没有看到任何错误或其他东西。

React 跟它没有直接关系。

【讨论】：