ボタンにJSON文字列を実装するネイティブに反応します

Question

私は、websocketがどのようにネイティブに反応するかを理解するためにアプリケーションをプログラミングしています。 websocketからJSON形式でデータを取得しましたが、console.logを使って自分のコンソールに出力することができますが、JSONオブジェクトの一部だけをボタンに配置したいと思います。

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

だから私は文字列を "希望しますか？"と書いていますか？ボタン上。私は次のコードでこれを試しましたが、エラーが発生しました。未定義はオブジェクトではありません（this.state.text = JSON.stringify（myObj.Question）を評価する）

ここに私のコードはありません。スタイルシート）：

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。コンポーネントの状態を設定するには、componentDidMount内部setStateを使用します。

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

私は個人的にRNにWebSocketを使って何を構築していないが、原則としてすべてのリスナーがcomponentDidMountで設定をcomponentWillUnmountで削除する必要があります。