Реагировать на отображение списка элементов из запроса Ajax

Question

Я изучаю React и пытаюсь отобразить список пользователей и ajax call. При добавлении строки

я получаю неожиданную ошибку токена от CodePen

export default Users;

Когда я удаляю строку, ошибок больше нет, но список пользователей не отображается.

Мой код:

function GetUsers(project){
  $.ajax({
        url: "https://jsonplaceholder.typicode.com/users",
        success: function (data) {
            console.log(data);
            callback(null, data);
        },
        error: function (error) {
            console.log(data);
            callback(error, {});
        }
    });
}

function UserList(users) {
  const userItems = users.map((user) =>
  <ul>
    <li>
       { user.name }
    </li>
    <li>
      { user.email }
    </li>
    <li>
      { user.phone}
    </li>
  </ul>
 );


 return (userItems);  
}

class Users extends Component {

  componentDidMount() {
    GetUsers(null, function (err, data) {
      if (err)
      {
        console.log(err); 
      }// do something
      this.setState({ users: data })
    }.bind(this))
  }

  render() {
    return(
        <UserList user = {this.state.users} />
      );
  }

}


if (document.getElementById('root')) {
    ReactDOM.render(<Users />, document.getElementById('root'));
}

Здесь - мой код.

Спасибо за любую помощь!

Answer 1

Проблема 1 в вызове AJAX

function GetUsers(project){
  $.ajax({
        url: "https://jsonplaceholder.typicode.com/users",
        success: function (data) {
            console.log(data);
            callback(null, data);
        },
        error: function (error) {
            console.log(data);
            callback(error, {});
        }
    });
}

$.ajax - это асинхронный вызов, это означает, что он не возвращает напрямую никакого значения (как он мог бы, если он выбирает результаты из Интернета), он просто создает другую функцию, которая будет вызывать success и error, когда завершено.

Вот почему нам нужно обернуть его обратными вызовами

function GetUsers(project, resolve = () => {}, reject = () => {}) {
}

Проблема 2 в креплении

  componentDidMount() {
    GetUsers(null, function (err, data) {
      if (err)
      {
        console.log(err); 
      }// do something
      this.setState({ users: data })
    }.bind(this))
  }

Этот код совершенно неправильный, в нем даже есть синтаксическая ошибка, поэтому не стоит обсуждать это подробно.

Нам нужно вызвать нашу новую функцию и передать успешный обратный вызов для изменения состояния

GetUsers(null, users => {
  this.setState({ users });
});

Таким образом мы будем вызывать GetUsers дождаться его результатов и только после этого мы будем мутировать состояние с новым результатом

3 проблема при создании компонента

Компоненты React не имеют состояния по умолчанию, вам нужно вывести состояние из конструктора, поэтому нам нужно изменить инициализацию на

  constructor(props) {
    super(props);

    this.state = {
      users: false
    };
  }

в противном случае вы получите Cannot call setState of undefined, так как состояние не создается автоматически для повышения производительности, и все компоненты по умолчанию Pure.

Я создал рабочую песочницу здесь

Answer 2

в

function GetUsers(project){
  $.ajax({
        url: "https://jsonplaceholder.typicode.com/users",
        success: function (data) {
            return data;
        },
        error: function (error) {
            console.log(error);
            return {};
        }
    });
}

-

success: function (data) {
    return data;
}

не делает то, что вы думаете, что делает. return data на самом деле не возвращает данные ... никуда.

Вам нужен обратный звонок.

function GetUsers(project, callback){
  $.ajax({
        url: "https://jsonplaceholder.typicode.com/users",
        success: function (data) {
            callback(null, data)
        },
        error: function (error) {
            callback(error, {})
        }
    });
}

class Users extends Component {
  componentDidMount() {
    GetUsers(null, function (err, data) {
      if (err) // do something
      this.setState({ users: data })
    }.bind(this))
  }

  render() {
    return(
      <UserList user = {this.state.users} />
    );
  }
}

вы также можете Promise - уточнить вещи, чтобы упростить логику