Javascript 浏览器在向服务器发送数据时发出4个请求

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

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>
  );
};

从“React”导入React；
导出常量组件=（）：JSX.Element=>{
const getCoords=async（）：Promise=>{
返回新承诺（（解决、拒绝）=>{
navigator.geolocation.getCurrentPosition(
（位置：GeolocationPosition）=>解析（位置），
（错误）=>拒绝（错误）
);
});
};
const getData=async（）=>{
常数{纬度，经度}=（等待getCoords（））.coords；
console.log（纬度+“”+经度）；
const response=wait fetch（`URL`）；
const result=wait response.json（）；
控制台日志（结果）；
};
getData（）；
返回(
你好
);
};

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

useffect

中调用

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();
  }, []);

useffect（（）=>{
const getCoords=async（）：Promise=>{
返回新承诺（（解决、拒绝）=>{
navigator.geolocation.getCurrentPosition(
（位置：GeolocationPosition）=>解析（位置），
（错误）=>拒绝（错误）
);
});
};
const getData=async（）=>{
常数{纬度，经度}=（等待getCoords（））.coords；
console.log（纬度+“”+经度）；
const response=wait fetch（`URL`）；
const result=wait response.json（）；
控制台日志（结果）；
};
getData（）；
}, []);

页面上有这个组件的4个吗？首先，您的

getCoords（）

函数不需要做出自己的承诺；地理定位API已经为您制作了一个，您可以等待并返回结果。另外，您的

getData（）

函数被标记为

async

，但它不返回任何内容，当调用它时，调用它时不带

wait

或

。然后（）Yes@Arew：好了，谜团解决了。@SergioTulentsev所以这只是一个重播还是什么？这解决了我的问题，谢谢