Блог

Получаю this is undefined ошибку. Попытался найти решение, но ничего не нашел.

Этот же код отлично работает на другой странице, но я не знаю, что здесь не так. Вывод на печать брендов до заданного состояния является допустимым результатом печати.

 class FindSponsors extends Component {

    constructor() {
        super();
        this.state = {
            data: []
        }
    }

    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({     //Error here
                data: brands
            })
        });
    }


    render() {
        return (
            <div className="main">
                
            </div>
        );
    }
}


export default FindSponsors;
 

Попробуйте использовать функцию со стрелкой:

 db.ref("sponsor").once("value").then((snapshot) => { /*your function body here*/})
 

this ключевое слово-это не что иное, как ссылка на контекст выполнения. В приведенном выше примере вы «выполняете» функцию «в обратном вызове».
Попробуйте прочитать это, чтобы лучше понять, как это работает и чем функции стрелок отличаются от обычных.

Проблема здесь в том , что когда вы определяете свою функцию обратного вызова в .then , контекст этой функции меняется и this в основном будет ссылаться на внутреннюю часть функции.

Здесь два решения:

1. Используйте этот .bind метод, чтобы изменить значение this для обратного вызова. Это было бы что-то вроде этого:

 const callback = function (snapshot) {
    // Your callback logic
}
db.ref("sponsor").once("value").then(callback.bind(this));
 

2. Используйте функцию со стрелкой. У них есть специфика, чтобы не иметь собственных привязок this ключевого слова. Это было бы так:

 db.ref("sponsor").once("value").then((snapshot) => {
    // Your callback logic
});