не может прочитать массив после GET и setState, хотя его там

Question

GET-запрос, который извлекает все заказы, сделанные определенным пользователем.Странная настройка, но она правильно вытягивает данные.

    var all = [];
    axios.get('/api/orders/' + this.props.user.name)
    .then(function (res) {
        res.data.forEach(e => {
            e.orders.forEach(eachOrder => {
                 all.push (
                    eachOrder
                )
            })  
        })
        console.log('this be all: ', all);
    })
    this.setState({
        orders : all
    });

eachOrder печатает заказы (для каждого заказа):

{type: "Pizza", extraType: "na", extraInfo: "na", date: "", quantity: "1", …}

все это будет console.log:

(5) [{…}, {…}, {…}, {…}, {…}]
0: {type: "Pizza", extraType: "na", extraInfo: "na", date: "", quantity: "1", …}
1: {type: "na", extraType: "Can", extraInfo: "Diet Coke", date: "", quantity: "1", …}
2: {type: "na", extraType: "Can", extraInfo: "Diet Coke", date: "", quantity: "1", …}
3: {type: "na", extraType: "1 Pound", extraInfo: "Honey Garlic", date: "", quantity: "1", …}
4: {type: "na", extraType: "1 Pound", extraInfo: "Honey Garlic", date: "", quantity: "1", …}
length: 5
__proto__: Array(0)

Отлично, именно то, что я ожидал.Я установил заказы штата для всех .. но заказы кажутся очень странными?

if (this.state.orders !== null) {
  console.log('lets see the order: ', this.state.orders)
}

давайте посмотрим порядок ..:

[]
0: {type: "Pizza", extraType: "na", extraInfo: "na", date: "", quantity: "1", …}
1: {type: "na", extraType: "Can", extraInfo: "Diet Coke", date: "", quantity: "1", …}
2: {type: "na", extraType: "Can", extraInfo: "Diet Coke", date: "", quantity: "1", …}
3: {type: "na", extraType: "1 Pound", extraInfo: "Honey Garlic", date: "", quantity: "1", …}
4: {type: "na", extraType: "1 Pound", extraInfo: "Honey Garlic", date: "", quantity: "1", …}
length: 5
__proto__: Array(0)

Я не могу проверить .length порядка, я не могу map или forEach, ничего.Я не могу проверить элементы в массиве ether.

Есть идеи, что с ним происходит?

Answer 1

Вам необходимо setState в обратном вызове вашего http-асинхронного запроса.Вы получаете ошибку отклонения обещания, потому что ваша ссылка this перенаправляется на function(res) {}.

Это часто случается, когда вы используете ключевое слово function для обратного вызова вместо функции стрелки ES6 (также рекомендуется при написании методов компонентов React)

Вот что вы можете сделать, заменитьfunction() {} с () => {}:

var all = [];
axios.get('/api/orders/' + this.props.user.name)
.then((res) => {   //change function to arrow function
    res.data.forEach(e => {
        e.orders.forEach(eachOrder => {
             all.push (
                eachOrder
            )
        })  
    })
    this.setState({
        orders : all
    });
    console.log('this be all: ', all);
})

ИЛИ, если вам нужно или вы хотите продолжать использовать ключевое слово function в качестве обратного вызова, вы можете превратить ваш компонентный метод в функцию стрелки, чтобы связать ссылкуthis для компонента

mySexyMethod = () => {
    var all = [];
    axios.get('/api/orders/' + this.props.user.name)
    .then(function (res) {
        res.data.forEach(e => {
            e.orders.forEach(eachOrder => {
                 all.push (
                    eachOrder
                )
            })  
        })
        this.setState({
          orders : all
        });
        console.log('this be all: ', all);
    })
}

Но какое бы решение вы ни выбрали, первая и самая важная часть проблемы заключается в том, что ваш setState не находится в обратном вызове вашего асинхронного запроса, простопереместите это в блок, чтобы оно заработало.

Answer 2

Используйте функцию стрелки для блока then и переместите setState внутрь.Это должно сделать.

Посмотрите на этот документ, это может помочь https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html

Answer 3

Это должно работать.По крайней мере, это работает для мужчин здесь https://github.com/mustafamamun/Test/blob/master/UI/src/App.js

axios.get('/api/orders/' + this.props.user.name)
.then(res=> {
    res.data.forEach(e => {
        e.orders.forEach(eachOrder => {
             all.push (
                eachOrder
            )
        })  
    })
    console.log('this be all: ', all);
    this.setState({
      orders : all
    });
})

Answer 4

Ваш setState запускается до завершения вызова извлечения, поскольку он находится за пределами блока then.Также для доступа к this внутри блока then необходимо сделать функцию обратного вызова axios функцией стрелки:

.then((res) => {

Это может выглядеть просто так:

axios.get('/api/orders/' + this.props.user.name)
.then((res) => {
  const orders = res.data.reduce((acc, e) => {
    return [...acc, ...e.orders]
  }, [])
  this.setState({orders})
})