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

Question

我的反应组件有问题。问题是，当我想获取当前地理坐标时，我获取了 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>
  );
};

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

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

The browser makes 4 requests when sending data to the server

javascript

fetch

navigator

typescript

reactjs