Javascript 无法在GET和setState之后读取数组，即使它在那里

获取请求，它提取某个用户发出的所有订单。奇怪的设置，但它确实正确地提取了数据

    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
    });

每个供应商都会打印订单（针对每个订单）：

{type:“Pizza”，extraType:“na”，extraInfo:“na”，日期：，数量：“，…}

这是所有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

，我无法

映射

或

forEach

，什么都不能。我无法检查阵列中的元素

---

你知道这是怎么回事吗？

你的

setState

正在fetch调用完成之前运行，因为它在

then

块之外。此外，要访问

然后
块中的
此
，您需要将axios回调函数设置为箭头函数：

。然后（（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})
})

在fetch调用完成之前，您的
setState
正在运行，因为它位于
then
块之外。要访问
then
块内的
this
，您需要将axios回调函数设置为箭头函数：

。然后（（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})
})

对
使用箭头功能，然后
块并将
设置状态
移到内部。这样就可以了

查看此文档，它可能有助于对
使用箭头功能，然后
块并将
设置状态
移到内部。这样就可以了

看看这个文件，它可能会有帮助，这应该是有效的。至少这对男性是有效的

这应该行得通。至少这对这里的男人是行得通的

您需要在http异步请求的回调中
setState
。您将收到承诺拒绝错误，因为您的
此
引用正被重新定向到
函数（res）{}

当您使用
函数
关键字进行回调而不是使用ES6 arrow函数（也是编写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);
})

或者，如果需要或希望继续使用
函数
关键字作为回调，可以将组件方法转换为箭头函数，将
此
的引用绑定到组件

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
不在异步请求的回调中，只需将其移动到块中即可使其工作。
您需要
setState
在http异步请求的回调中。您正在得到承诺检查错误，因为您的
此
引用正被重新定向到
函数（res）{}

当您使用
函数
关键字进行回调而不是使用ES6 arrow函数（也是编写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);
})

或者，如果需要或希望继续使用
函数
关键字作为回调，可以将组件方法转换为箭头函数，将
此
的引用绑定到组件

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
不在异步请求的回调中，只需将其移到块中即可工作。
this.setState（{orders:all}）；
应该在无法完成的then块内。如果我在块内设置状态（在console.log之后），我会收到以下错误：未处理的拒绝（TypeError）：无法读取未定义的
this.setState（{orders:all}）的属性“setState”；
应该在无法完成的then块内。如果我在块内设置状态（在console.log之后）我得到了以下错误：未处理的拒绝（TypeError）：无法读取不恰当答案和详细信息的属性“setState”，这很有帮助。我不知道这会导致问题。@RobertOchinski很高兴它有帮助：）非常好的答案和详细信息，它有帮助。我不知道这会导致问题。@RobertOchinski很高兴它有帮助：）