Как обновить компонент реакции на событие socket.io

Следуя совету этот вопрос о принудительном обновлении компонента, я написал следующий код для обновления компонента, когда мое сокетное соединение получает широковещательную рассылку.

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" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
1
0
583
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы теряете контекст this, если не делаете это как функцию стрелки:

socket.on('data', (data) => {

Кроме того, поскольку вы используете компонент класса, вам не нужен этот трюк setState, который вы можете сделать this.forceUpdate().

Отлично, спасибо. Я не понимал, что стрелочные функции сохраняют исходный контекст.

Charlie 08.04.2019 16:54

Другие вопросы по теме