Следуя совету этот вопрос о принудительном обновлении компонента, я написал следующий код для обновления компонента, когда мое сокетное соединение получает широковещательную рассылку.
constructor(props) {
super(props)
this.state = { key: 0 };
}
componentWillMount(){
const socket = io()
socket.on('data', function(data) {
// Do stuff with the data
this.setState({ key: Math.random() })
})
}
Но я получаю ошибку
Uncaught TypeError: this.setState is not a function
Я понимаю, что это потому, что this
относится к чему-то другому, когда оно находится внутри функции socket.on()
, но я не знаю, как это обойти.
я тоже пробовал
constructor(props) {
super(props)
this.state = { key: 0 };
this.update = this.update.bind(this);
}
componentWillMount(){
const socket = io()
socket.on('data', function(data) {
// Do stuff with the data
update()
})
}
update(){
this.setState({ key: Math.random() })
}
Но потом я получаю ошибку
Uncaught ReferenceError: update is not defined
У кого-нибудь есть лучший способ обновить мой компонент или исправить мою текущую реализацию?
Вы теряете контекст this
, если не делаете это как функцию стрелки:
socket.on('data', (data) => {
Кроме того, поскольку вы используете компонент класса, вам не нужен этот трюк setState, который вы можете сделать this.forceUpdate()
.
Отлично, спасибо. Я не понимал, что стрелочные функции сохраняют исходный контекст.