javascript - react + Axios : Uncaught (in promise) TypeError: Cannot read property 'map' of undefined

Question

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

由于使用 localhost 访问 Codepen 违反了 CORS，因此我必须创建一个 JSON Web 服务器。

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 图片:

Answer 1

这是因为用户状态最初是空的，willmount方法在这里什么也没做，所以它直接进入render方法，然后进入didmount，在render方法中它尝试将用户状态映射为未定义的值，从而导致错误，我认为你应该检查用户状态是否未定义。直接在渲染方法中检查它或创建一个用于渲染映射的函数。 (假设方法名为renderUser)，则可以直接将获取的方法设置为{this.renderUser()}

将你的 setState 更改为此，

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