Axios AJAX call in React возвращает только начальное состояние

Я пытаюсь сделать простой вызов AJAX с использованием Axios in React, но я не могу понять, где я ошибаюсь.Axios AJAX call in React возвращает только начальное состояние

Вот то, что я до сих пор (в пределах моего компонента):

ComponentDidMount() { 
    axios.get('https://jsonplaceholder.typicode.com/users') 
     .then(res => { 
     const users = res 
     this.setState({ users }); 
     }); 
} 

render() { 
    console.log(this.state.users) // returns the **initialised EMPTY array** 
    return (
    <div> 
     {this.state.users.map(user => <p>{user.name}</p>)} // returns nothing 
    </div> 
    ) 
}

я доступ к простой массив по URL, указанному в методе .get() (проверьте, чтобы увидеть его структуру, если это необходимо). Затем я связываюсь с обещанием .then() и передаю аргумент res в функции со стрелкой.

Затем присваиваю значение переменной users и пытаюсь установить состояние как это. Итак, в этот момент я ожидаю, что this.state.users будут равны результирующему массиву.

Однако ...

A) Когда я пытаюсь console.log (this.state.users), он возвращает инициализируется пустой массив

B) Когда я пытаюсь сделать карту из массив, итерация через свойство name на каждый объект, опять же, ничего.

Куда я иду не так?

источник

2016-10-08 Paulos3000

Часть из опечатки (как отмечено Phi Nguyen), несколько других вещей, чтобы исправить:

1) Вардар решает обещание с объектом ответа. Таким образом, чтобы получить результаты, которые вы должны сделать:

axios.get('https://jsonplaceholder.typicode.com/users') 
    .then(res => { 
     const users = res.data; // Assuming the response body contains the array 
     this.setState({ users }); 
    });

Отъезд документы об объекте ответа здесь: https://github.com/mzabriskie/axios#response-schema

2) Если есть исключения (ваш запрос не), вы, вероятно, хотите, чтобы справиться с этим вместо проглатывания. So:

axios.get('https://jsonplaceholder.typicode.com/users') 
    .then(res => { 
    const users = res.data; // Assuming the response body contains the array 
    this.setState({ users }); 
    }) 
    .catch(err => { 
     // Handle the error here. E.g. use this.setState() to display an error msg. 
    })

источник

2016-10-08 14:05:05

Это сработало - спасибо. Я немного смущен, но когда результаты 'console.log' возвращаются, возвращаются два значения:' [] 'и ожидаемый массив из API. Это, по-видимому, можно объяснить значением состояния, которое возвращается один раз при инициализации, а затем снова с компонентомDidMount. Однако, когда я пытаюсь получить доступ к одному объекту в массиве, 'this.state.users [0]' например, он пытается получить доступ к пустому массиву. Я могу добраться до него только путем сопоставления массива. Можно ли каждый раз настраивать значение обновленного значения this.state.users' и не извлекать начальное значение состояния? – Paulos3000

Каждый раз, когда вы вызываете this.setState, метод визуализации вызывается снова, чтобы отразить новое состояние компонента. См. Этот график здесь: http://imgh.us/react-lifecycle.svg Итак, у вас есть начальный рендер (когда пользователи не инициализируются), то у вас есть второй после componentDidMount и третий после вызова setState (at этот момент у вас есть список пользователей). Вы можете инициализировать список в своем конструкторе компонента. Обычно в методе рендеринга вы можете проверить, является ли '' 'this.state.users'' пустым и отображать загрузчик или что-то в этом роде. –

опечатка. Он должен быть componentDidMount вместо ComponentDidMount.

источник

2016-10-08 14:05:28

Axios AJAX call in React возвращает только начальное состояние

ответ

Смежные вопросы