ReactでRocketchatの履歴を取得する

Question

ReactでRocket.Chatの簡単なチャットクライアントを作成しています。
メッセージをサーバーに送信し、送信したメッセージをメッセージリストに表示することが可能です。
これで、クライアントがサーバーから最後のメッセージを取得し、メッセージリストに表示するようにします。
APIエンドポイントはhttps://rocket.chat/docs/developer-guides/rest-api/channels/historyです。

MessageList.jsコンポーネントに実装する方法を知りたいので、チャット履歴に正しく表示されるようにします。現時点では部品の私のコードのthats

：、アプリケーションコンポーネントにデータをフェッチ状態にそれを与えると、メッセージリストにそれをプッシュダウン

import React, {Component} from 'react' 
import PropTypes from 'prop-types' 

import Message from '../Message/Message' 
import './MessageList.css' 

class MessageList extends Component { 

    static propTypes = { 
     messages: PropTypes.arrayOf(PropTypes.object) 
    } 

    static defaultProps = { 
     messages: [], 
    } 

    componentDidMount =() => { 

     fetch('http://localhost:3000/api/v1/channels.history?roomId=drtWNMjAmKM86hnxp', { 
      method: 'GET', 
      headers: { 
       'X-Auth-Token': '0qZt4LEd2pWHdCcjxFA-yn9RdOMdKpLMJPC-ejFDUCj', 
       'X-User-Id': 'JTFuq3JpgchDJT3Wb', 
       'Content-Type': 'application/json', 
      } 
     }) 


     console.log("Component did mount") 

    } 

    componentDidUpdate =() => { 
     this.node.scrollTop = this.node.scrollHeight 

    } 

    render() { 
     return (
      <div className="MessageList" ref={(node) => (this.node = node)}> 
       {this.props.messages.map((message, i) => (
        <Message key={i} {...message} /> 
       ))} 
      </div> 
     ) 
    } 

} 

export default MessageList 

Answer 1

その容易になります。

// getting the Message History and set it to the State 
    axios.get(
     window.url+'channels.historyroomId='+window.roomId, 
     {headers: { 
      'X-Auth-Token' : window.authToken, 
      'X-User-Id' : window.userId, 
      'Content-Type' : 'application/json' 
     } 
     } 
    ) 

     .then(res => { 
      const messages = res.data.messages; 
      messages.reverse(); 
      this.setState({ messages }); 
     }); 

、その後：

​​