在 useEffect 中设置状态然后访问它的属性答案

【问题标题】：Setting state in useEffect then accessing it's properties在 useEffect 中设置状态然后访问它的属性
【发布时间】：2020-11-11 10:31:03
【问题描述】：

我正在尝试访问在我的状态下使用 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;

以下 API 调用的输出是：-

[{…}]
0:
boundingbox: (4) ["-1.444471", "-1.163332", "36.6509378", "37.1038871"]
class: "place"
display_name: "Nairobi, Kenya"
icon: "https://locationiq.org/static/images/mapicons/poi_place_city.p.20.png"
importance: 0.73502675943376
lat: "-1.2832533"
licence: "https://locationiq.com/attribution"
lon: "36.8172449"
osm_id: "9185096"
osm_type: "relation"
place_id: "237011109"
type: "city"
__proto__: Object
length: 1
__proto__: Array(0)

【问题讨论】：

标签： javascript reactjs api use-effect

【解决方案1】：

线

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

正在抛出错误，因为在 useEffect 有机会获取和填充数据之前，您正在尝试访问它。

您正在使用 {location && (...)} 在 JSX 中防范该错误，因此不要在外面定义纬度和经度，只需将计算放在里面。

另外，您应该标准化location 状态的类型吗？当你第一次定义它时，你将默认设置为一个列表[]，但是当你更新它时，你会创建一个对象{}。

【讨论】：

感谢您的帮助，谢谢。感谢您指出不同数据类型的错误

【解决方案2】：

useEffect 在组件在 dom 中渲染后执行。因此，当初始加载组件时，它会获得location 默认值[]。因此，当它访问data 属性时，它会变得未定义并引发错误。解决此问题的最佳方法是检查 location 是否具有 data 属性。您可以通过两种方式做到这一点：

1.可选链接

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

你可以在这里https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining阅读更多信息。

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 作为空对象{}，因为您要为其分配对象而不是数组。这将使代码不易出错。

【讨论】：