React + Axios: Uncaught (in promise) TypeError: Cannot read property 'map' of undefined
React + Axios: Uncaught (in promise) TypeError: Cannot read property 'map' of undefined
尝试通过简单的 Axios 教程开始习惯填充动态数据。 Loading and Using External Data in React
我不得不创建一个 JSON 网络服务器,因为使用本地主机访问 Codepen 违反了 CORS。
App.jsx
var App = React.createClass({
getInitialState: function(){
return{
users: []
};
},
componentDidMount: function(){
var _this = this;
this.serverRequest =
axios
.get("http://localhost:3004/users")
.then(function(results){
console.log(results.data);
_this.setState({
users: results.data.users
});
});
},
componentWillUnmount: function(){
//...
},
render: function(){
return(
<div>
<h3>Returning Users:</h3>
{this.state.users.map(function(user) {
return (
<div>{user.name}</div>
);
})}
</div>
);
}
});
export default App;
我知道应该将数据外推到 Redux 之类的东西中,但这只是处理动态数据的开始。我得到的错误是 Uncaught (in promise) TypeError: Cannot read property 'map' of undefined
我在做一些研究时找不到关于这个错误的很好的解释。那我做错了什么?
我看到如果我将数据预填充到 getInitialState
中,我可以获得 return。那么 Promise 将数据加载到初始状态出了什么问题?
编辑:
Console.log 图片:
如果您看到控制台输出的结果。它不包含“关键用户”,因此
_this.setState({
users: results.data.users
});
会将状态用户设置为未定义,因此您会得到 error when trying to use map
将 setState 更改为
_this.setState({
users: results.data
});
是因为user state一开始是空的,willmount方法这里没有做任何事情,所以直接进入render方法,然后进入didmount,在render方法中试图映射未定义值的user state,导致错误,我认为您应该检查用户状态是否未定义。直接在 render 方法中检查它或创建一个用于渲染映射的函数。 (假设方法名是renderUser),那么你可以把方法fetching直接写成{this.renderUser()}
将您的 setState 更改为此,
_this.setState({
users: results.data
});
尝试通过简单的 Axios 教程开始习惯填充动态数据。 Loading and Using External Data in React
我不得不创建一个 JSON 网络服务器,因为使用本地主机访问 Codepen 违反了 CORS。
App.jsx
var App = React.createClass({
getInitialState: function(){
return{
users: []
};
},
componentDidMount: function(){
var _this = this;
this.serverRequest =
axios
.get("http://localhost:3004/users")
.then(function(results){
console.log(results.data);
_this.setState({
users: results.data.users
});
});
},
componentWillUnmount: function(){
//...
},
render: function(){
return(
<div>
<h3>Returning Users:</h3>
{this.state.users.map(function(user) {
return (
<div>{user.name}</div>
);
})}
</div>
);
}
});
export default App;
我知道应该将数据外推到 Redux 之类的东西中,但这只是处理动态数据的开始。我得到的错误是 Uncaught (in promise) TypeError: Cannot read property 'map' of undefined
我在做一些研究时找不到关于这个错误的很好的解释。那我做错了什么?
我看到如果我将数据预填充到 getInitialState
中,我可以获得 return。那么 Promise 将数据加载到初始状态出了什么问题?
编辑:
Console.log 图片:
如果您看到控制台输出的结果。它不包含“关键用户”,因此
_this.setState({
users: results.data.users
});
会将状态用户设置为未定义,因此您会得到 error when trying to use map
将 setState 更改为
_this.setState({
users: results.data
});
是因为user state一开始是空的,willmount方法这里没有做任何事情,所以直接进入render方法,然后进入didmount,在render方法中试图映射未定义值的user state,导致错误,我认为您应该检查用户状态是否未定义。直接在 render 方法中检查它或创建一个用于渲染映射的函数。 (假设方法名是renderUser),那么你可以把方法fetching直接写成{this.renderUser()}
将您的 setState 更改为此,
_this.setState({
users: results.data
});