我的浏览器连续发送获取数据请求，并在反应中多次给出 200 后给出挂起状态

Question

我正在 post 尝试 mongodb 数据库中的一些数据，即使我什么都没做，它也能正常工作，直到获取请求连续发送。在网络选项卡中，它首先显示 200 状态，然后显示挂起并给出错误。

 const [services, setServices] = useState([]);
  const [treatment, setTreatment] = useState(null);

  fetch('http://localhost:5000/services')
    .then(res => res.json())
    .then(data => setServices(data));

添加以下代码后报错：

const booking = {
      treatmentId: _id,
      treatment: name,
      date: formattedDate,
      slot,
      patientEmail: user.email,
      patient: user.displayName,
      phone: e.target.mobile.value
    }

    fetch('http://localhost:5000/booking', {
      method: 'POST',
      headers: {
        'content-type': 'application/json'
      },
      body: JSON.stringify(booking)
    }).then(res => res.json())
      .then(data => {
        console.log(data, 'success');
        toast('Appointment has been set!!!');
      })

出现以下错误：

bundle.js:701          GET http://localhost:5000/services net::ERR_INSUFFICIENT_RESOURCES
AppointmentSchedules @ bundle.js:701
renderWithHooks @ bundle.js:53492
updateFunctionComponent @ bundle.js:57611
beginWork @ bundle.js:59578
beginWork @ bundle.js:64465
performUnitOfWork @ bundle.js:63626
workLoopSync @ bundle.js:63539
renderRootSync @ bundle.js:63508
performConcurrentWorkOnRoot @ bundle.js:62805
workLoop @ bundle.js:75228
flushWork @ bundle.js:75202
performWorkUntilDeadline @ bundle.js:75486
bundle.js:701          Uncaught (in promise) TypeError: Failed to fetch
    at AppointmentSchedules (bundle.js:701:3)
    at renderWithHooks (bundle.js:53492:22)
    at updateFunctionComponent (bundle.js:57611:28)
    at beginWork (bundle.js:59578:20)
    at beginWork (bundle.js:64465:18)
    at performUnitOfWork (bundle.js:63626:16)
    at workLoopSync (bundle.js:63539:9)
    at renderRootSync (bundle.js:63508:11)
    at performConcurrentWorkOnRoot (bundle.js:62805:78)
    at workLoop (bundle.js:75228:38)

注意：服务器端正常运行，没有任何错误

Answer 1

在react中获取api时，应该使用useEffect或useLayoutEffect。看 useEffect or useLayoutEffect

Answer 2

useEffect 仅在第一次渲染时运行没有依赖性

const [services, setServices] = useState([]);
const [treatment, setTreatment] = useState(null);

useEffect(() => {
    fetch('http://localhost:5000/services')
        .then(res => res.json())
        .then(data => setServices(data));
}, [])

我的浏览器连续发送获取数据请求，并在反应中多次给出 200 后给出挂起状态

My browser sends fetch data request continuously and it gives pending status after giving 200 several times in react

javascript

node.js

reactjs

fetch-api