Question

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

Answer 1

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

  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个请求

1 个答案: