在反应中获取 api 时获取无法读取未定义的属性

Question

我正在处理 api，当我 console.log(data.city) 时，它会给出结果，但如果我添加 console.log(data.city.name)，它会显示 undefined。在控制台中，我得到了结果，但在重新加载后出现了这个错误。此外，当第一个控制台是空数组然后第二个是数据时。

const [cityName, setCityName] = useState('delhi');
  const [data,setData] = useState([]);
  const getWeatherInfo = async () => {
    await fetch(
      `https://api.openweathermap.org/data/2.5/forecast?q=delhi&units=metric&appid=4beffc863037e89f0f181d893d1cf79b`)
      .then(res => res.json())
      .then((data)=> {
        setData(data)
      })
      .catch((err)=> {
        console.log('error' + err);
      })
  };

console.log(data.city.name);

  useEffect(() => {
    getWeatherInfo();
  }, []);

Answer 1

您将状态初始化为一个空数组，因此元素 city 在第一次渲染时不存在，从而导致错误。您可以仅在关键城市存在时通过记录来解决此问题，如：

 if (data.city) {
    console.log(data.city.name);
  }

Answer 2

为什么默认状态定义为数组？如我所见，没有数组响应，所以最好将默认状态定义为空。

const [data,setData] = useState(null);

然后你可以使用?代替if语句

console.log(data?.city?.name);

在反应中获取 api 时获取无法读取未定义的属性

getting cannot read properties of undefiend when fetching api in react

fetch

reactjs