node.js - 我在更新我的反应状态时出错

Question

在尝试从函数更新状态并从componentdidmount生命周期方法调用函数时，状态不会更新。但是当我尝试通过从 jsx 内部调用函数来更新状态时，它确实有效。我不知道发生了什么

//my state
constructor(){
    super()
    this.state = {
        activepage:'dashboard',
        language:[],
    }
}

//the function I am updating state from
getLanguage = () => {
    axios.get('http://localhost:3001/language')
        .then(function (response) {
            console.log(response.data.language);
            this.setState({
                language:response.data.language
            })
        })
        .catch(function (error) {
            return error;
    });
}

//I am calling function from
componentDidMount(){
    this.getLanguage();
    console.log("state after updating",this.state) //displays an empty array
}

但是当我getLanguage从 jsx 内部调用函数时，它会更新状态。

Answer 1

用 es6 箭头函数更新你的函数

.then((response) => {
        console.log(response.data.language);
        this.setState({
            language:response.data.language
        })
    })

Answer 2

因为es6你可以使用arrow function

getLanguage = () => {
    axios.get('http://localhost:3001/language')
        .then((response) => {
            console.log(response.data.language);
            this.setState({
                language:response.data.language
            })
        })
        .catch((error) => {
            return error;
        })
    );
}

因为es5您可以声明this超出范围的axios功能

function getLanguage() {
    var self = this;
    axios.get('http://localhost:3001/language')
        .then(function(response) {
            console.log(response.data.language);
            self.setState({
                language:response.data.language
            })
        })
        .catch(function(error) {
            return error;
        })
    );
}