Ajax-запрос с реагированием

Question

Я хочу переместить данные в людей.Затем я хочу перечислить с помощью функции карты массива.

export default class App extends Component {
constructor(props) {
    super(props);
    this.state = {
      persons: [],
    };
  }

  componentDidMount() {
  $.ajax({
    url: 'https://jsonplaceholder.typicode.com/users',
    method: 'GET',
    success: function (data) {
      this.setState({ persons: [data] }, function() {
        console.log(data); // working
     /* console.log(persons) */  // not working
      });
    }.bind(this)
});
};

 render() {
    return (
      <ul>
         { this.state.persons.map(person => <li>{person.name}</li>)}
      </ul>

console.log (data) работает.Но console.log (человек) не работает.Как я могу исправить.Спасибо.

Answer 1

Если я правильно понимаю ваш вопрос, то ответ заключается в том, чтобы изменить способ установки состояния при вызове setState() следующим образом:

// replace [data] with just data
this.setState({ persons: data }, function() {
    console.log(data); // working
});

Это корректно обновит поле personsв вашем состоянии к массиву данных, возвращаемых из https://jsonplaceholder.typicode.com/users, который будет запускать рендеринг для отображения списка person.name значений:

render() {
    return (<ul>
         { this.state.persons.map(person => (<li>{person.name}</li>))}
      </ul>)
}