ソケットから複数の値を反復処理する方法

Question

複数のチャットルームのソケットからデータを取得しようとしています。私は（event.dataを使用して）データを記録することができましたが、返品のデータを表すのに問題があります。

私は2つのマップ（チャットルーム名を取得するために1つ、メッセージのリストを取得するために1つ）を使用してみました。これはどのように達成されますか？

const MessageSocket = new WebSocket('ws://localhost:8000/chat'); 

class Chat extends Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     data: [] 
    }; 
    } 

    componentWillMount() { 
    MessageSocket.addEventListener('message', event => { 
     console.log('one at a time', event.data) 
     this.setState(prev => { 
     return { 
      data: { ...prev.data, ...event.data } 
     } 
     }); 
     const values = Object.values(JSON.parse(event.data)) 
     console.log(values) 
    }); 
    } 

    render() { 
    return (
     <div> 
      The room title is: {values.map(e => <h2>{values}</h2>)} 
     </div> 
    ); 
    } 
} 

データ（それは個々にそれぞれconsole.logs）

{ 
    "Room 1": [{ 
    "pk": 1, 
    "message": "Hi", 
    "handle": "Foo", 
    }, { 
    "pk": 2, 
    "message": "Hello", 
    "handle": "Bar", 
    }] 
} 

別のコンソール・ログ・エントリ

{ 
    "Room 2": [{ 
    "pk": 1, 
    "message": "See ya", 
    "handle": "Bob", 
    }, { 
    "pk": 2, 
    "message": "Laters", 
    "handle": "Pete", 
    }] 
} 

Answer 1

const values = …、ローカル変数を割り当てます。あなたはそれをちょうどrender()で参照することはできません。 componentWillMount()からrender()に何かを使用するには、setState({foo: something})にそれを渡し、this.state.fooでアクセスする必要があります。