response-native this.setState, вызывающий прекращение работы кода

Question

У меня настроено подключение к веб-сокету, к которому успешно подключается реагирующий.Мой код ниже:

export default class Settings extends React.PureComponent {
    constructor() {
        super()
        this.state = {
            questionText: ''
        }
    }

    connect() {

        console.log('connected');
        var socket = new WebSocket('ws://127.0.0.1:8000/users/');
        socket.onopen = function open() {
            console.log('WebSockets connection created.');

        }

        socket.onmessage = function message(event) {
            var data = JSON.parse(event.data);

            var username = encodeURI(data['username']);
            var question = encodeURI(data['question']);
            console.log('username: ' + username);
            console.log('question: ' + question);
            this.setState({ questionText: question });
            console.log('state: ' + this.state.questionText);

        }
    }


    render() {
        return (
            <View style={styles.container}>
                <Text>{this.state.questionText}</Text>
                <Button
                    title = "Connect"
                    onPress = {this.connect} />
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        backgroundColor: '#EFEFF4',
        alignItems: 'center',
        justifyContent: 'center', 
        flex: 1,
    },
});

Функция включения сообщения вызывается, когда сообщение отправляется с серверной части, и имя пользователя и вопрос печатаются на консоли, как и ожидалось.Тем не менее, состояние не меняется, и при этом не запускается какой-либо код, который я ставлю после this.setState({ questionText: question });

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

Answer 1

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

...
    connect = () => {

        console.log('connected');
        var socket = new WebSocket('ws://127.0.0.1:8000/users/');
        socket.onopen = function open() {
            console.log('WebSockets connection created.');

        }

        socket.onmessage = (event) => {
            var data = JSON.parse(event.data);

            var username = encodeURI(data['username']);
            var question = encodeURI(data['question']);
            console.log('username: ' + username);
            console.log('question: ' + question);
            this.setState({ questionText: question });
            console.log('state: ' + this.state.questionText);

        }
    }
...

Если вы не хотите использовать функции стрелок, то вы также можете использовать .bind, чтобы убедиться, что thisправильно.

export default class Settings extends React.PureComponent {
    constructor() {
        super()
        this.state = {
            questionText: ''
        }
        this.connect.bind(this);
    }

    connect() {

        console.log('connected');
        var socket = new WebSocket('ws://127.0.0.1:8000/users/');
        socket.onopen = function open() {
            console.log('WebSockets connection created.');

        }

        socket.onmessage = function message(event) {
            var data = JSON.parse(event.data);

            var username = encodeURI(data['username']);
            var question = encodeURI(data['question']);
            console.log('username: ' + username);
            console.log('question: ' + question);
            this.setState({ questionText: question });
            console.log('state: ' + this.state.questionText);

        }.bind(this)
    }
...