Карта не может быть прочитана

2

По какой-то причине он иногда просматривается, но я получаю еще одну ошибку, не возвращающую ничего, и в других случаях она просто говорит, что не может прочитать карту свойств неопределенного. Я пытаюсь скомпилировать список пользователей в 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, и я не уверен, почему он выдает три, но средний имеет всех пользователей я Ищу:

Изображение 32062

Любая помощь будет принята с благодарностью!

  • 0
    Я очень новичок в реагировании на себя, поэтому я в основном слежу за ответами других людей. Но я использую синтаксис React.Component extends, который дает мне конструктор для начального состояния. У меня нет проблемы с пустым массивом [], пытающимся выполнить рендеринг с использованием этого синтаксиса.
  • 0
    Да, я имею в виду, я мог бы попробовать это, я полагаю ... Я просто знаю, что это два разных способа написания одной и той же вещи, поэтому я не могу представить, что это будет проблемой. Или, по крайней мере, я надеюсь, что проблема не в том, ха.
Показать ещё 4 комментария
Теги:

2 ответа

1
Лучший ответ

Вы можете попытаться помещать логику рендеринга пользователей в метод класса 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>
    );
  },
});
Поделиться
  • 0
    Ага! Я верю, что это сработает ... Я собираюсь немного переделать это, чтобы сделать так, и я дам вам ответ. Большое спасибо за указание на это!
  • 0
    Нет проблем! @TaylorKing
Показать ещё 1 комментарий
0

В некоторый момент (второе обновление) this.props.users выглядит неопределенным, и функция карты не может справиться с этим.

Я переписал пример с использованием синтаксиса 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.

Вот как я переписал его с некоторыми незначительными изменениями, так как у меня нет пользовательских аксиомов.

class UserList extends React.Component{
  constructor(props){
    super(props);      
    this.state = { users : []  };
  }  
  componentDidMount() {    
    this.loadUsersFromServer();    
  }
  loadUsersFromServer(){      
    this.setState({users: 
                  
                  [{
  "_id": 1,
  "username": "Nicole",
  "password": "0uTjaH",
  "_v": "7.6.9"
}, {
  "_id": 2,
  "username": "Steve",
  "password": "22l8h6a8NPU",
  "_v": "7.41"
}, {
  "_id": 3,
  "username": "Joyce",
  "password": "yA3efEc",
  "_v": "6.3"
}, {
  "_id": 4,
  "username": "Todd",
  "password": "7LsQ9aHqIfhy",
  "_v": "7.1"
}, {
  "_id": 5,
  "username": "Maria",
  "password": "uHZ5fkCi04v",
  "_v": "9.31"
}]
                  
                  
                  });
  }
  
  render(){    
    return (
      <div>
        <h1>User List </h1>
        <User users={this.state.users}   />
      </div> 
    );
  }
};

class User extends React.Component{
  constructor(props){
    super(props);
  }
  
  render(){
    console.log(typeof(this.props.users));
    //console.log(this.props.users);

    //const user = JSON.stringify(this.props.users);
    
    const userList = this.props.users.map((user) => {
      return (
        <div>
          <span>key={user._id}</span>
          <span>username={user.username}</span>
        </div>
      );
    });

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

ReactDOM.render(<UserList /> , document.getElementById('root') );
span {padding: 3px}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>
Поделиться
  • 0
    Это не решает проблему для меня, к сожалению. : / Я видел это и в других местах, но я попробовал это снова. Еще ничего.
  • 0
    Имеет ли этот ответ смысл @TaylorKing

Ещё вопросы

Сообщество Overcoder
Наверх
Меню