[英]How to render data from API response in React?
如何初始化從API到變量的響應,以便可以在我的render()
函數中使用它? 為什么component.setState
不起作用? 錯誤:
未捕獲的TypeError:無法讀取未定義的屬性“用戶名”(…)
class Main extends React.Component {
constructor(props) {
super(props);
this.state = {
data: 23
};
}
componentDidMount() {
var component = this;
fetch('https://fcctop100.herokuapp.com/api/fccusers/top/alltime')
.then(function(response) {
return response.json()
}).then(function(json) {
var data = json;
console.log(data[0]);
console.log(data[0].username);
component.setState({
data: json
})
})
}
render() {
return (
<div>
<h1>elo{this.state.data[0].username}</h1>
</div>
);
}
}
const docs = document.getElementById('root');
ReactDOM.render( <Main/> , docs);
原因是,在第一次從API調用返回響應之前,未設置此“ this.state.data [0] .username”。
渲染方法中的類似內容應該可以工作:
render() {
var someData = this.state.data[0].username || "";
return (
<div>
<h1>elo{someData}</h1>
</div>
);
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.