浏览器向服务器发送数据时发出 4 次请求答案

【问题标题】：The browser makes 4 requests when sending data to the server浏览器向服务器发送数据时发出 4 次请求
【发布时间】：2021-07-15 16:08:28
【问题描述】：

我的反应组件有问题。问题是当我想获取当前的地理坐标时，我得到了 4 次。如果我将它们提交到服务器，同样的问题仍然存在。浏览器发出 4 个相同的请求而不是 1 个。有什么问题？这是我的组件的完整代码：

import React from "react";

export const Component = (): JSX.Element => {
  const getCoords = async (): Promise<GeolocationPosition> => {
    return new Promise((resolve, reject) => {
      navigator.geolocation.getCurrentPosition(
        (position: GeolocationPosition) => resolve(position),
        (error) => reject(error)
      );
    });
  };

  const getData = async () => {
    const { latitude, longitude } = (await getCoords()).coords;
    console.log(latitude + " " + longitude);
    const response = await fetch(`URL`);
    const result = await response.json();
    console.log(result);
  };

  getData();

  return (
    <div>
      <h1>Hello</h1>
    </div>
  );
};

【问题讨论】：

页面上有4个这个组件吗？
首先，您的getCoords() 函数不需要做出自己的Promise；地理定位 API 已经为您制作了一个，您只需 await 并返回结果即可。此外，您的 getData() 函数被标记为 async，但它不会返回任何内容，并且在调用它时会在没有 await 或 .then() 的情况下调用它。
@SergioTulentsev 是的
@Arew：好了，好了，谜团解开了。
@SergioTulentsev 所以这只是重新渲染还是什么？

标签： javascript reactjs typescript fetch navigator

【解决方案1】：

您不应该在 body ò 函数组件中调用 API。您应该在useEffect 中调用getData：

  useEffect(() => {
    const getCoords = async (): Promise<GeolocationPosition> => {
      return new Promise((resolve, reject) => {
        navigator.geolocation.getCurrentPosition(
          (position: GeolocationPosition) => resolve(position),
          (error) => reject(error)
        );
      });
    };

    const getData = async () => {
      const { latitude, longitude } = (await getCoords()).coords;
      console.log(latitude + " " + longitude);
      const response = await fetch(`URL`);
      const result = await response.json();
      console.log(result);
    };

    getData();
  }, []);

【讨论】：