Question

我正在编写一个应用程序，以了解websocket函数如何反应原生。我已经以jSON格式从websocket获取数据，我可以使用console.log在我的控制台中打印出来，但是我想在按钮上放置一部分JSON对象，例如，如果我的JSON对象看起来像这个：

    var myJSON = '{"Question": "Want to join?", "Answer":"yes" }';

所以我想写字符串＆＃34;想要加入？＆＃34;在按钮上。我在下面的代码中尝试了这样的但是我得到了错误：undefined不是一个对象（评估＆＃39; this.state.text = JSON.stringify（myObj.Question）＆＃39;）

这是我的代码（没有我的样式表）：

    import React, { Component } from 'react';
    import {AppRegistry,StyleSheet,Text,View,Alert,AsyncStorage,TouchableOpacity} from 'react-native';

    export default class ExampleW extends Component {
      constructor(props) {
        super(props);
            this.state = {
            text: '',
            }
      }
    async onButtonPressed(){
        Alert.alert('The button was pressed!')
    }
    getText(){
        return (this.state.text);
    }

   componentDidMount(){
       var ws = new WebSocket('ws://URL');

       ws.addEventListener('message', function (event) {
           console.log('Message from server', event.data);
           var myObj = JSON.parse(event.data);
           console.log('Typ: ',myObj.Type);
           console.log('Question:', myObj.Question);
           this.state.text = JSON.stringify(myObj.Question);
    });

    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.welcome}>
                    Welcome to React Native!
                </Text>
                <View style ={styles.buttonContainer}>
                    <TouchableOpacity style = {styles.buttonAccount}
                                  onPress = {this.onButtonPressed.bind(this)}>
                        <Text style = {styles.buttonText}> {this.getText()}  </Text>
                    </TouchableOpacity>
                </View>
            </View>
         );
    }}

我不明白如何正确转换JSON对象以及如何将其保存在this.state.text中以及为什么我无法在我的按钮上显示它。谢谢你的帮助！

Answer 1

您正确解析JSON对象。生成的myObj是一个JavaScript对象，因此您可以使用以下方法直接访问其值： myObj.Question。要设置组件的状态，请使用setState内的componentDidMount：

ws.addEventListener('message', function (event) {
    console.log('Message from server', event.data);
    var myObj = JSON.parse(event.data);
    this.setState({text: myObj.Question});
}

我没有亲自在RN中使用websockets构建任何内容，但作为一般原则，componentDidMount中设置的任何听众都应该在componentWillUnmount中删除。

React Native在Button

1 个答案: