开发者问题收集

无法读取未定义的属性图

2017-01-31
13008
javascript mongodb reactjs

由于某种原因，它有时会映射通过，但我收到另一个不返回任何内容的错误，而其他时候它只是说无法读取未定义的属性图。我正在尝试在 React 中编译一个用户列表。

我有一个名为 UserList 的组件，它正在查询我的数据库以查找所有用户并更新状态： 

const UserList = React.createClass({
  getInitialState: function () {
    return {
      users: []
    }
  },
  componentDidMount: function () {
    this.loadUsersFromServer();
  },
  loadUsersFromServer: function () {
    axios.get('/api/users').then((users) => {
      this.setState({users: users.data.users});
    });
  },
  render: function () {
    return (
      <div>

        <h1>User List</h1>

        <User
          users={this.state.users}
        />

      </div>
    );
  },
});

然后我将它传递给它的子组件 User，这就是错误发生的地方： 

const User = React.createClass({


  render: function () {
    console.log('props: ' + JSON.stringify(this.props.users));

    const users = this.props.users.map((user) => {
      return (
        <User
          key={user._id}
          username={user.username}
        />
      );
    });

    return (
      <div id="users">
        {users}
      </div>
    );
  },
});

Chrome Dev 工具中有趣的是，由于某种原因，我在尝试打印出 this.props.users 时收到了三个日志，我不确定为什么它会输出三个日志，但中间的一个有我要查找的所有用户：

logs of this.props.users

任何帮助将不胜感激！

2个回答

您可以尝试将用户渲染逻辑放入 UserList 类的方法中。类似这样的方法应该可行。 

const UserList = React.createClass({
  getInitialState: function () {
    return {
      users: []
    }
  },
  componentDidMount: function () {
    this.loadUsersFromServer();
  },
  loadUsersFromServer: function () {
    axios.get('/api/users').then((users) => {
      this.setState({users: users.data.users});
    });
  },
  renderUsers: function (users) {
    return <div>{users.map(user => <div key={user._id} username={user.username} />)}</div>
  },
  render: function () {
    return (
      <div>
        <h1>User List</h1>
        { this.renderUsers(this.state.users) }
      </div>
    );
  },
});
Tom Coughlin
2017-01-31

在某个时刻（第二次刷新） this.props.users 看起来未定义，并且 map 函数无法处理它。

我使用 React.Component 语法重写了该示例，因为我从未使用过旧版 React（V0.13 之前）语法。

查看 此处 了解不同语法的更多信息。

但是，这部分： 

const User = React.createClass({
  render: function () {
    console.log('props: ' + JSON.stringify(this.props.users));

    const users = this.props.users.map((user) => {
      return (
        <User
          key={user._id}
          username={user.username}
        />

看起来很奇怪。我认为您在 User 中使用了 User。

这是我重写它的方式，由于我没有用户 axios，因此进行了一些小修改。

prosti
2017-01-31