OpenWeatherMap API：无法读取未定义的属性

Question

const [currWeatherData, setCurrWeatherData] = useState({})

useEffect(() => {
  navigator.geolocation.getCurrentPosition(CallAPI, showError);
}, [])

//... showError function

function CallAPI(position){
  const lat = position.coords.latitude
  const long = position.coords.longitude
  fetch(/*api call*/)
    .then(response => response.json())
    .then(data => {
      setCurrWeatherData(data.current)
    })
}

return (
  <div>
    <Header curr = {currWeatherData}/>
  <div>
)

import React from "react"

function Header(props){
  return(
    <div>
      {/*<h1>{props.curr.weather[0].main}</h1>*/}
      {console.log(props.curr.weather)}
    </div>
  )
}

来自API的json文件的开头如下所示。

json文件

在“current”中，有一个weather属性，它是一个数组，其中一个元素是一个对象，因此我假设访问“main”属性的正确方式是“current.weath[0].main”。但是，当我尝试console.log或返回它时，我得到错误“不能读取未定义的属性'0'”。奇怪的是，当我控制。log“current.weather”时，它会向控制台输出一个数组和一个对象。

//... code above
.then(data => {
  setCurrWeatherData(data.current)
  setIsLoading(false)
})

<div>
  {!isLoading && <Header curr = {currWeatherData}/>}
</div>

我浏览了https://medium.com/swlh/how-does-react-hooks-re-renders-a-function-component-cc9b531ae7f0以获得帮助

Answer 1

在app.js中有以下代码：

return (
  <div>
    <Header curr = {currWeatherData}/>
  <div>

但是，这并没有考虑到异步API调用。因此CurrWeatherData为空，因为API调用尚未完成。

您需要考虑生命周期，并且只在API调用完成后才尝试呈现数据。React中有各种方法来实现这一点，这取决于您的总体应用程序/组件设计。