親状態の変更時に反応しない子プロップは更新されません

Question

ここに主な問題があります： 私は最初のメッセージでsessionIdを読む必要があるwebsocketを開きます。したがって、これは1回だけ行う必要があります。 （すべてを投稿didntは）

import React, { Component } from 'react'; 
import PropTypes from 'prop-types'; 
import ChatBot from 'react-simple-chatbot'; 

export class ProcessMessage extends Component { 
    constructor(props) { 
    super(props); 

    this.state = { 
     messages: [], 
    }; 
    } 

    componentWillMount() { 
    const input = { 
     type: 'user', 
     sessionId: this.props.sessionId, 
     msg: this.props.inputMessage, 
    }; 
    //send message to websocket 
    this.props.connection.send(input) 

    this.props.connection.onmessage = evt => { 
     // add the new message to state 
     const msg = JSON.parse(evt.data); 

     let responseText = msg.msg; 
     this.setState({ 
     messages : responseText 
     }) 
    }; 



    } 


    render() { 
    return <div>{ this.state.messages}</div>; 
    } 
} 

とのWebSocketを開き、このようになりますセッションIDのコンポーネントを取得「アプリ」親：

私は、子コンポーネント次のようになります「processMessage」を持っている

import React, { Component } from 'react'; 
import PropTypes from 'prop-types'; 
import { ProcessMessage } from './components/processMessage.js'; 

export class App extends React.Component { 
    constructor(props) { 
    super(props); 
    // Assign state itself, and a default value for items 


    } 
    componentWillMount() { 
     const url = 'ws://localhost:4040'; 

     // this open websocket service 
     this.connection = new WebSocket(url); 

     this.setState(
      { connection:this.connection } 
     ); 
     var sessionId; 
     // listen to onmessage event 
     this.connection.onmessage = evt => { 

     // add the new message to state 
      const msg = JSON.parse(evt.data); 
      if (msg.type = "sessionId") { 
       sessionId=msg.msg; 
       console.log("now received sessionId " +sessionId); 
       this.setState(
       { sessionId: sessionId} 
      ); 

      } 
     }; 
    } 

    render(){ 
    return <ProcessMessage sessionId={this.state.sessionId} connection={this.state.connection} inputMessage={this.state.inputMessage}/> 
    } 

だから何が働いているメッセージが正しく接続小道具（ソケットオープン）に送られたが、それは私が取得する場所ソケットの最初の応答を受信するためにいくつかの時間がかかるため、セッションIDは、子コンポーネントで定義されていないされていることですsessionIdしかし、コンポーネント新しい小道具で再現されていないようです。

私はまた、子コンポーネントprocessMessageに入れてみてください：

componentWillReceiveProps(nextProps) { 
    this.setState({ sessionId: nextProps.sessionId}); 
} 

成功しません。私は明白な何かを欠いていますか

Answer 1

あなたはrerenderトリガーされませんので、小道具がReact docs:

componentWillMount（）

から

を更新しないcomponentWillMount状態を設定するようcomponentDidMountライフサイクル機能を使用する必要があります

componentWillMount()は、マウントが行われる直前に呼び出されます。 レンダリング（）の前に呼び出されるため、 で同期状態を設定すると、このメソッドは再レンダリングを実行しません。このメソッドでは、 の副作用またはサブスクリプションを導入しないでください。

これは、サーバーレンダリングで呼び出される唯一のライフサイクルフックです。通常、 の代わりにconstructor()を使用することをおすすめします。

componentDidMount() { 
     const url = 'ws://localhost:4040'; 

     // this open websocket service 
     this.connection = new WebSocket(url); 

     this.setState(
      { connection:this.connection } 
     ); 
     var sessionId; 
     // listen to onmessage event 
     this.connection.onmessage = evt => { 

     // add the new message to state 
      const msg = JSON.parse(evt.data); 
      if (msg.type = "sessionId") { 
       sessionId=msg.msg; 
       console.log("now received sessionId " +sessionId); 
       this.setState(
       { sessionId: sessionId} 
      ); 

      } 
     }; 
    }