React + Axios:Uncaught(承诺)TypeError:无法读取属性' map'未定义的

时间:2017-03-03 19:19:46

标签: javascript reactjs axios

尝试通过简单的Axios教程开始习惯于填充动态数据。 Loading and Using External Data in React

我必须创建一个JSON Web服务器,因为在使用localhost违反CORS的情况下命中Codepen。

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我可以得到回报。那么Promise将数据加载到初始状态会出现什么问题?

编辑:

Console.log图片:

enter image description here

2 个答案:

答案 0 :(得分:1)

因为用户状态最初是空的,所以willmount方法在这里没有做任何事情,所以它直接转到render方法然后转到didmount,在render方法中它尝试用未定义的值映射用户状态,这会导致错误,我认为你应该检查用户状态是否未定义。直接在render方法中检查它或创建一个用于渲染映射的函数。 (假设方法名称是renderUser),那么你可以直接将方法提取为{this.renderUser()}

将您的setState更改为此

_this.setState({
    users: results.data
});

答案 1 :(得分:0)

如果您看到控制台输出的结果。它不包含“关键用户”,因此

 _this.setState({
        users: results.data.users
      });

会将状态用户设置为undefined,从而获得error when trying to use map

将setState更改为

 _this.setState({
        users: results.data
      });