[英]Cannot read property 'username' of undefined error
I'm using react to render data fetched from a API. 我正在使用react渲染从API获取的数据。 My code looks like this:
我的代码如下所示:
var App = React.createClass({
getInitialState : function(){
return {
lists: []
}
},
componentDidMount: function(){
fetch('https://fcctop100.herokuapp.com/api/fccusers/top/recent')
.then(function(result){
return result.json();
}).then(function(jsonResult){
this.setState({
lists: jsonResult
});
}.bind(this));
},
render: function(){
console.log(this.state.lists);
return(
<div>{this.state.lists[0].username}</div>
);
}
});
ReactDOM.render(<App />, document.getElementById('container'));
I console.log (this.state.lists) in the render function and I got the whole data from the API, but when I render a part of the data, I got the 'Cannot read property 'username' of undefined ' error. 我在render函数中使用console.log(this.state.lists),我从API中获得了全部数据,但是当我渲染数据的一部分时,我得到了“无法读取属性'username'的未定义'错误。 If I set lists: [''] in the getInitialState function and render {this.state.lists[0].username}, it works but if I change the index to 1, I got the same error.
如果我在getInitialState函数中设置列表:['']并呈现{this.state.lists [0] .username},它可以工作,但是如果将索引更改为1,则会出现相同的错误。 I guess it has something to do with the lifecycle functions.
我想这与生命周期功能有关。 But I can't figure it out.
但我不知道。 The data fetched from API looks like this
从API提取的数据如下所示
I've been working on this for 3 hours. 我已经为此工作了3个小时。 Hope someone could help me out.
希望有人可以帮助我。 Much appreciated!
非常感激!
This is happening because this.state.lists
will be undefined first time. 发生这种情况是因为
this.state.lists
将是第一次未定义。 Use below code to get it bypass for the first time 使用下面的代码第一次使其绕过
This is happening because render()
method get's called before componentDidMount()
and your this.state.lists
is []
at that time, hence this.state.list[0]
will be undefined
It will be going to set with the help of this.setState()
till then this.state.lists
will be empty 发生这种情况是因为在
componentDidMount()
之前调用了render()
方法,并且您的this.state.lists
是[]
,因此this.state.list[0]
将是undefined
,它将在的帮助下进行设置this.setState()
直到this.state.lists
为空
return(
{ this.state.lists.length && <div>this.state.lists[0].username </div> }
);
The error is because for initial rendering this.state.lists
will not have any data. 该错误是因为初始渲染
this.state.lists
将没有任何数据。 componentDidMount()
lifecycle method is called after initial rendering. 初始渲染后将调用
componentDidMount()
生命周期方法。
render: function(){
console.log(this.state.lists);
return(
<div>{this.state.lists.length >0 ?this.state.lists[0].username:null}</div>
);
}
});
The problem is because the data has not been fetched before rendering. 问题是因为在渲染之前尚未获取数据。
componentDidMount(){
fetch('https://fcctop100.herokuapp.com/api/fccusers/top/recent')
.then(function(result){
return result.json();
}).then(function(jsonResult){
this.setState({
lists: jsonResult
});
}.bind(this));
}
componentWillReceiveProps(nextProps) {
this.renderView();
}
renderView = () => {
if (this.state.lists){
return <div>{this.state.lists[0].username}</div>
} else { return <div><p>loading</p></div>
}
render() {
return (
{this.renderView()}
)
ReactDOM.render(<App />, document.getElementById('container'));
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.