Javascript 在useEffect中设置状态，然后访问它'；s属性_Javascript_Reactjs_Api_Use Effect

Javascript 在useEffect中设置状态，然后访问它'；s属性

javascript reactjs api

Javascript 在useEffect中设置状态，然后访问它'；s属性,javascript,reactjs,api,use-effect,Javascript,Reactjs,Api,Use Effect,我正在尝试访问在React中使用useEffect挂钩设置的处于我的状态的属性，但我一直未捕获此错误“TypeError:无法读取未定义的属性“0”。这是我的代码：- import React, { useState, useEffect } from "react"; const Geocode = (props) => { const [location, setLocation] = useState([]); useEffect(() =>

我正在尝试访问在React中使用useEffect挂钩设置的处于我的状态的属性，但我一直未捕获此错误“TypeError:无法读取未定义的属性“0”。这是我的代码：-

import React, { useState, useEffect } from "react";

const Geocode = (props) => {
  const [location, setLocation] = useState([]);

  useEffect(() => {
    async function fetchData() {
      const response = await fetch(
        `https://eu1.locationiq.com/v1/search.php?key=MY_KEY=${props.address}&format=json&limit=1`
      );
      const data = await response.json();
      setLocation((location) => ({ ...location, data }));
    }
    fetchData();
  }, [props.address]);

  const latitude = location.data[0].lat;
  const longitude = location.data[0].lon;

  return (
    <div>
      <h2>Location</h2>
      {location && (
        <p>
          Lat: {latitude}, Lon: {longitude}
        </p>
      )}
    </div>
  );
};

export default Geocode;

线路

  const latitude = location.data[0].lat;

正在抛出错误，与之前一样，

useffect

有机会获取并填充数据，您正在尝试访问它

您正在使用

{location&&（…）}

来防止JSX中的错误，因此不需要在外部定义纬度和经度，只需将计算放在那里即可

此外，您应该标准化

位置

状态的类型？当您第一次定义它时，您将默认值设置为一个列表

[]

，但当您更新它时，您将创建一个对象

{}

行

  const latitude = location.data[0].lat;

正在抛出错误，与之前一样，

useffect

有机会获取并填充数据，您正在尝试访问它

您正在使用

{location&&（…）}

来防止JSX中的错误，因此不需要在外部定义纬度和经度，只需将计算放在那里即可

此外，您应该标准化

位置

状态的类型？当您首次定义它时，您将默认设置为列表

[]

，但当您更新它时，您将创建一个对象

{}

useffect

在dom中呈现组件后执行。因此，当组件发生初始加载时，它将获得

位置

默认值

[]

。因此，当它访问

数据

属性时，它将被取消定义并抛出错误。解决此问题的最佳方法是检查

位置

是否具有

数据

属性。您可以通过两种方式完成：

1。可选链接

  const latitude = location?.data?.[0]?.lat;
  const longitude = location?.data?.[0]?.lon;

你可以在这里了解更多

2。有条件检查

 const latitude = location.data && location.data.length > 0 ?location.data.[0].lat: 0;
 const longitude = location.data && location.data.length > 0 ? location.data.[0].lon : 0;

另外，我建议将默认值指定给

location

作为空对象

{}

，因为您将对象指定给它，而不是数组。它将使代码不易出错。

useffect