TypeError：无法使用 google-maps api 和 rapidapi 读取 null 的属性（读取“sw”）

Question

我在使用 google-maps api 和 rapidapi 的另一个 api 时遇到了这个错误。

首先这是有效的代码：

API -> index.js

import axios from "axios";

const URL =
  "https://travel-advisor.p.rapidapi.com/restaurants/list-in-boundary";
// code snippet from "https://rapidapi.com/apidojo/api/travel-advisor/"

const options = {
  params: {
    // bl_latitude: sw.lat,
    // bl_longitude: sw.lng,
    // tr_longitude: ne.lng,
    // tr_latitude: ne.lat,
    bl_latitude: "11.847676",
    tr_latitude: "12.838442",
    bl_longitude: "109.095887",
    tr_longitude: "109.149359",
  },
  headers: {
    "x-rapidapi-host": "travel-advisor.p.rapidapi.com",
    "x-rapidapi-key": "key",
  },
};

export const getPlacesData = async () => {
  try {
    const {
      data: { data },
    } = await axios.get(URL, options);

    return data;
  } catch (error) {
    console.log(error);
  }
};

App.js（只给出区别）

const [bounds, setBounds] = useState(null);

const [places, setPlaces] = useState([]);

useEffect(() => {
    getPlacesData().then((data) => {
      // console.log(data);
      setPlaces(data);
    });
  }, []);

给出错误的代码：

API -> index.js

import axios from "axios";

const URL =
  "https://travel-advisor.p.rapidapi.com/restaurants/list-in-boundary";
// code snippet from "https://rapidapi.com/apidojo/api/travel-advisor/"

export const getPlacesData = async (sw, ne) => {
  try {
    const {
      data: { data },
    } = await axios.get(URL, {
      params: {
        bl_latitude: sw.lat,
        bl_longitude: sw.lng,
        tr_longitude: ne.lng,
        tr_latitude: ne.lat,
        // bl_latitude: "11.847676",
        // tr_latitude: "12.838442",
        // bl_longitude: "109.095887",
        // tr_longitude: "109.149359",
      },
      headers: {
        "x-rapidapi-host": "travel-advisor.p.rapidapi.com",
        "x-rapidapi-key": "key",
      },
    });

    return data;
  } catch (error) {
    console.log(error);
  }
};

App.js

useEffect(() => {
    navigator.geolocation.getCurrentPosition(
      ({ coords: { latitude, longitude } }) => {
        setCoordinates({ lat: latitude, lng: longitude });
      }
    );
  }, []);
  // comment: 1

  useEffect(() => {
    getPlacesData(bounds.sw, bounds.ne).then((data) => {
      console.log(data);
      setPlaces(data);
    });
  }, [coordinates, bounds]);

就在此更改之后，它开始出现此错误

我已经尝试了我的最佳水平，但我无法找到代码有什么问题。我用 git 可以看出区别。

Answer 1

我遇到了同样的问题。您需要传递一个空对象而不是“null”

const [bounds, setBounds] = useState(null);

这是您当前的代码 ^

const [bounds, setBounds] = useState({});

这将使您的代码正常工作^

Answer 2

你的代码有点不清楚，如果你用尽可能少的代码更简洁地提供你的问题，我可以提供帮助。

但我可以在这里说的一件事是，您将 bounds 变量声明为没有属性的 null，那么您如何访问 bounds 的 sw 属性，因为它根本不可用。

另外，您没有使用setBounds 方法来设置bounds 变量。我错过了什么吗？试试这样的：

const [bounds, setBounds] = useState({ sw: 0, ne: 0});