问题:如何更改“this”对象

我知道this对象不能更改但需要替代方法的规则。

var that= this
        axios.get('http://ec2-54-165-240-14.compute-1.amazonaws.com:3000/api/foodItem').then(function(data){
            console.log("inside axios ",data)
            that.setState({
                items : data,
            });
            var curGroupId = that.props.cartReducer.val;
            var items = that.state.items ;
            var curItems= [];
            for(var i in items){
                if(items[i].food_group_id==curGroupId){
                    curItems.push(items[i]);
                }
            }
            that.setState({
                curItems : curItems
            })

        }).catch(function(err){
            console.log(err)
        })

我想更新在then函数内部无法访问的this对象中的状态,因此我在函数之前将this对象存储在that中,但我想在this对象中应用更改。

解答

您可以尝试使用箭头函数,这样您就可以在内部函数中访问this。

axios.get('http://ec2-54-165-240-14.compute-1.amazonaws.com:3000/api/foodItem')
   .then((data) => {
        console.log("inside axios ",data)
        this.setState({  // <---- references to the parent scope
            items : data,
        });
        var curGroupId = that.props.cartReducer.val;
        var items = that.state.items ;
        var curItems= [];
        for(var i in items){
            if(items[i].food_group_id==curGroupId){
                curItems.push(items[i]);
            }
        }
        this.setState({   // this too ;)
            curItems : curItems
        })

    }).catch((err) => {
        console.log(err)
    })

箭头函数将使用与父函数相同的范围,在这些情况下非常方便。

还有一件事,我不建议多次调用setState。您应该只在回调结束时调用它一次,此时您的所有数据都已准备好使用。