Question

所以这是主要问题：我打开一个websocket，我需要在第一个消息中读取sessionId，以便将其用于发送更多消息。因此，这只需要进行一次。

我有一个子组件“processMessage”，如下所示：

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>;
  }
}

和一个“app”父级打开websocket并获取看起来像这样的sessionId组件（没有发布所有内容）：

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}/>
  }

那么有效的是消息是通过连接道具（套接字打开）正确发送的，但是sessionId在子组件中是未定义的，因为接收套接字的第一个响应需要一些时间才能得到sessionId但是组件似乎没有使用新道具重新渲染。

我也尝试放入子组件processMessage：

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

没有成功。我错过了一些明显的东西吗？

Answer 1

您应该使用componentDidMount生命周期功能作为componentWillMount中的设置状态，不会触发rerender，因此道具不会更新

来自 React docs:

<强> componentWillMount（）
     在安装发生之前立即调用
componentWillMount()。   在render（）之前调用，因此同步设置状态   此方法不会触发重新渲染。避免引入任何   此方法中的副作用或订阅。

这是在服务器渲染上调用的唯一生命周期钩子。通常，   我们建议改为使用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}
              );

            }
        };
  }

父状态更改后，React子道具不会更新

1 个答案: