React类组件调用setState时出现this undefined的TypeError如何解决？

问题触发原因 #

你遇到的this is undefined错误是普通函数的this指向规则导致的：

• 你在then中使用了普通匿名函数function (snapshot) {}，普通函数的this会在运行时根据调用上下文绑定，此处Promise回调函数执行时，上下文已经脱离了组件实例，因此this无法指向组件，自然访问不到this.setState方法。
• 你提到相同代码在其他页面可以正常运行，大概率是其他页面的回调使用了箭头函数，或是提前做了this绑定，你可以核对其他页面的写法差异。

修复方案 #

共有三种常用的修复方式，按需选择即可：

方案1：将then的回调改为箭头函数（最常用，写法最简单） #

箭头函数不会创建独立的this，会继承外层作用域的this，此处外层componentDidMount的this就是组件实例，刚好符合需求：

componentDidMount() {
    db.ref("sponsor").once("value").then((snapshot) => { // 把普通函数替换为箭头函数
        let data = snapshot.val()
        let brands = []
        for (let brand in data) {
            brands.push({
                name: data[brand].Name,
                website: data[brand].Website
            })
        }
        this.setState({
            data: brands
        })
    });
}

方案2：提前存储组件实例的this指向 #

在回调外部把this存到临时变量中，回调内直接用临时变量调用setState：

componentDidMount() {
    const _this = this // 提前存储组件实例的this
    db.ref("sponsor").once("value").then(function (snapshot) {
        let data = snapshot.val()
        let brands = []
        for (let brand in data) {
            brands.push({
                name: data[brand].Name,
                website: data[brand].Website
            })
        }
        _this.setState({ // 用提前存储的变量调用
            data: brands
        })
    });
}

方案3：给回调函数手动绑定this #

用bind方法手动把回调的this绑定为组件实例：

componentDidMount() {
    db.ref("sponsor").once("value").then(function (snapshot) {
        let data = snapshot.val()
        let brands = []
        for (let brand in data) {
            brands.push({
                name: data[brand].Name,
                website: data[brand].Website
            })
        }
        this.setState({
            data: brands
        })
    }.bind(this)); // 手动绑定this为组件实例
}

内容的提问来源于stack exchange，提问作者UJjwal