类型错误： 无法读取未定义的属性(读取"国家/地区")

Question

我正在尝试从API获取数据，并在我的应用程序中使用这些数据。但问题是，当我试图从刚刚从API获得的JSON中获取某个对象或数据时，我会得到一个TypeError:无法读取undefined的属性"country"。该房产确实存在。顺便说一下，我使用的是React.js。我真的很感谢你的帮助；指导这是代码：

App.js

{typeof weather != 'undefined' ? (
<div>
<div className="location-box">
<div className="location">

{weather.name},{weather.sys.country} 
</div>
<div className="date"> {dateBuilder(new Date())} </div>
</div>
<div className="weather-box">
<div className="weather-temperature">15*C</div>
<div className="weather">Sunny </div>
</div>
</div>
) : ("NULL")}

Api，我们将从那里获取数据。

function App() {
const [query, setQuery] = useState("");
const [weather, setWeather] = useState({});
const Search = (evt) => {
if (evt.key === "Entre") {
debugger;
fetch(`${api.base}weather?q=${query}&units=metric&APPID${api.key}`)
.then((res) => res.json())
.then((result) => {
setWeather(result);
setQuery("");
console.log(result);
});
}
};
}

Answer 1

如果您确信该属性确实存在，那么它必须是初始渲染。您使用{}初始化useStaet，但要防范undefined。因此，将useState({})更改为useState()。

const [weather, setWeather] = useState();

您还可以在读取country时添加一个空检查。

{weather.name}, {weather.sys?.country}

Answer 2

问题是因为您的天气检查：typeof weather != 'undefined'，而您的天气初始值是{}。为了解决这个问题，不要为weather设置init值。像这样：

const [weather, setWeather] = useState();

因此，在第一个渲染中，weather值将为undefined，在下一个渲染中它包含您的api响应。