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

Question

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

Answer 1

您不应在正文中调用 API ò function 组件。 您应该在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();
  }, []);