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

Posted 2023-03-31

【中文标题】TypeError：无法使用 google-maps api 和 rapidapi 读取 null 的属性（读取“sw”）

【英文标题】：TypeError: Cannot read properties of null (reading 'sw') using google-maps api and rapidapi

【发布时间】：2021-09-04 11:50:53

【问题描述】：

我在使用 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 可以看出区别。

【问题讨论】：

我应该分享更多代码吗？？

请提供一个minimal reproducible example 来证明您的问题。对给出错误的请求的响应是什么？

【参考方案1】：

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

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

这是您当前的代码 ^

const [bounds, setBounds] = useState();

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

【参考方案2】：

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

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

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

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

【讨论】：

很抱歉不清楚。我只是在前面加上一个 [dot] 就解决了这个错误？即可选链接？实际上有些地方 api 没有提供足够的信息。

你把你的 [dot] 放在哪里了？ @Priyam

嗨！看到问题是很多时候我们希望收到一些数据并且我们为它们编写操作/显示/格式化但是如果我们没有以我们期望的方式收到怎么办？为此，我们使用可选链接？操作员。答案：这里 -> getPlacesData(bounds?.sw, bounds?.ne).then((data) => ….. 我在哪里收到这些数据