我正在尽最大努力来理解这个概念,在浪费了几个小时之后,我想尝试看看是否有人愿意修复并详细说明这样一个简单的问题
constructor(props) {
super(props);
this.state = {
marketdata: [],
loading: true
}
}
componentDidMount() {
axios.get('https://api.coingecko.com/api/v3/global')
.then(res => res.data)
.then((data) => {
this.setState({ marketdata: data })
console.log(this.state.marketdata.data.market_cap_change_percentage_24h_usd)
})
}
...
render() {
const { coindata, marketdata} = this.state;
<p>{marketdata.data.market_cap_change_percentage_24h_usd}</p>
TypeError: Cannot read property 'market_cap_change_percentage_24h_usd' of undefined
我希望能够更好地理解,以便在整个项目中尝试使用来自 API 的数据时能够继续下去,而不会陷入困境。
最佳答案
不完全确定 this.setState()
的作用,但我认为它应该设置成员 state
。
问题是您尝试访问对象的成员,而该对象不存在。所以,你应该改变
this.state.marketdata.data.market_cap_change_percentage_24h_usd
至
this.state.marketdata.market_cap_change_percentage_24h_usd
{ marketdata: data }
并不意味着新属性是 marketdata.data
,而是冒号 (:
) 只是一个赋值类似于 =
,因此 marketdata
获取 data
的值。
如果这不起作用,请尝试从“从上到下”进行 console.log,这意味着首先记录 this.state
,然后记录 this.state.marketdata
等等,直到您看到收到并设置的内容。
关于javascript - 简单地从 api 渲染数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58834015/