Question

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

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

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

未捕获的TypeError：无法读取未定义的属性“ region”

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

考虑到两者都是对象类型，我不明白为什么会出现typeError

这是发生错误的代码段：

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。

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

1 个答案: