API 获取数据问题

Question

我处于 React 框架的初级水平，正在创建一个天气应用程序。因此，我从 API 获取数据并将对象作为值传递给组件中的参数。现在，当尝试访问对象的内部数据值时，我遇到了错误

所以我将参数设为 在 App.js 中

{weather && <WeatherDisp data = {weather}/>}

在 WeatherDisp.js 中

const WeatherDisp = ({data}) => { return ( <div> <p>{data.main.temp}</p> </div> ); }

在写这篇文章时，我收到的错误为：

Cannot read properties of undefined (reading 'temp')

有人可以帮忙吗？

Answer 1

如果您在等待 API 数据响应时使用加载，然后渲染您的组件，那就太好了。此外，您还可以检查对象中是否存在数据。请尝试下面的代码，它应该会有所帮助。

data && data.main && data.main.temp

或者更好的方法如下

data?.main?.temp