关于javascript：React Axios：未捕获(Promise)TypeError：无法读取未定义的属性” map”


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

尝试通过简单的Axios教程开始习惯于填充动态数据。在React

中加载和使用外部数据

由于用本地主机访问Codepen违反了CORS，因此我不得不创建一个JSON Web服务器。

App.jsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
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(
       
          Returning Users:
            {this.state.users.map(function(user) {
          return (
            {user.name}
          );
         })}
       
    );
  }
});

export default App;

我知道应该将数据外推到Redux之类的东西，但这只是开始使用动态数据。我得到的错误是Uncaught (in promise) TypeError: Cannot read property 'map' of undefined，通过一些研究我找不到很好的解释此错误的解释。那我在做什么错呢？

我看到，如果将数据预填充到getInitialState中，我可以得到回报。那么Promise将数据加载到初始状态又出了什么问题呢？

编辑：

Console.log图片：

enter

相关讨论

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

将您的setState更改为此，

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

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

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

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

将setState更改为

1
2
3
 _this.setState({
        users: results.data
      });
相关讨论