React + Axios：未捕获（承诺中）TypeError：无法读取未定义的属性“地图”答案

【问题标题】：React + Axios: Uncaught (in promise) TypeError: Cannot read property 'map' of undefinedReact + Axios：未捕获（承诺中）TypeError：无法读取未定义的属性“地图”
【发布时间】：2017-03-03 19:19:46
【问题描述】：

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

我不得不创建一个 JSON Web 服务器，因为使用 localhost 访问 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 中，我可以获得回报。那么 Promise 将数据加载到初始状态有什么问题呢？

编辑：

Console.log 图片：

【问题讨论】：

这行console.log(results.data);的结果是什么
我得到了预期的数据返回。看起来数据没有被推入getInitialState中的用户数组中@
你能显示console.log(results.data);的输出吗？
我为控制台输出添加了一张图片
这是results.data 或results.data.users 的输出吗？？

标签： javascript reactjs axios

【解决方案1】：

因为用户状态一开始是空的，所以willmount方法在这里什么都没做，所以直接进入render方法，然后进入didmount，在render方法中它试图将用户状态映射到未定义的值，导致错误，我认为您应该检查用户状态是否未定义。直接在渲染方法中检查它或创建一个用于渲染映射的函数。（假设方法名是renderUser），那么可以把直接取的方法写成{this.renderUser()}

把你的 setState 改成这个，

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

【讨论】：

【解决方案2】：

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

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

会将状态用户设置为未定义，因此您会得到error when trying to use map

将 setState 更改为

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

【讨论】：

我真的很高兴写一个有用的comment来回答。