无法读取包含对象的属性的属性

Question

我在尝试访问具有另一个对象的引用属性的对象的属性时遇到问题。换句话说，一个对象包含在另一个对象中。

从像这样的 API 调用中获取数据后，例如：https：//api.apixu.com/v1/current.json？key=2352219608ed457fb3a12903193008&q=Helsinki 我的代码获取响应的数据并设置钩子的值：capitalWeather。

无论如何，该对象有两个属性：位置和当前，它们也是对象类型。每次我尝试从引用中访问任何值时，例如访问 capitalWeather.location.region 的值，我得到的是=

未捕获的类型错误：无法读取未定义的属性"区域">

正如预期的那样，它还适用于任何其他属性：名称，国家，纬度，纬度，tz_id等。

我不明白为什么我会收到一个类型错误，考虑到两者都是对象类型。

这是发生错误的代码片段：

const Displayer = ({ country }) => {
const [capitalWeather,setWeather]=useState([]);
useEffect(() => {
axios.get(`https://api.apixu.com/v1/current.json?key=2352219608ed457fb3a12903193008&q=${country.capital}`)
.then(response => {
console.log('Promise fullfiled, succesfully fetched data');
setWeather(response.data);
})
}, [country.capital]);
console.log(capitalWeather.location.region);
return (<div className='displayer'>
<h2>{country.name}</h2>
<p>Capital {country.capital}</p>
<p>Population {country.population}</p>
<h4>Languages</h4>
<ul>
{country.languages.map(lang => <li key={lang.name}>{lang.name}</li>)}
</ul>
<img src={country.flag} alt='this is the country flag'></img>
{/*<Weather weather={capitalWeather}/>*/}
</div>)
}

Answer 1

capitalWeather

在此代码中初始化为数组。

const [capitalWeather,setWeather]=useState([]);

capitalWeather.location.region肯定会抛出错误，因为它没有属性location。