Reactjs 在React中获得Rocketchat历史记录

我正在为Rocket编写一个简单的聊天客户端。在React中聊天。
此时，可以向服务器发送消息，并在消息列表中显示已发送的消息。
现在，我希望客户端从服务器获取最后的消息，并将其显示在我的消息列表中。
存在此的API终结点：

我想知道如何在MessageList.js组件中实现它，以便在聊天历史记录中正确显示它

这是我目前的组件代码：

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

import React，{Component}来自“React”
从“道具类型”导入道具类型
从“../Message/Message”导入消息
导入“./MessageList.css”
类MessageList扩展组件{
静态类型={
消息：PropTypes.arrayOf（PropTypes.object）
}
静态defaultProps={
信息：[]，
}
componentDidMount=（）=>{
取（'http://localhost:3000/api/v1/channels.history?roomId=drtWNMjAmKM86hnxp', {
方法：“GET”，
标题：{
“X-Auth-Token”：“0QZT4LED2PWDCCJXFA-yn9RdOMdKpLMJPC-ejFDUCj”，
“X-User-Id”：“JTFuq3JpgchDJT3Wb”，
“内容类型”：“应用程序/json”，
}
})
log（“组件未装载”）
}
componentDidUpdate=（）=>{
this.node.scrollTop=this.node.scrollHeight
}
render（）{
返回(
（this.node=node）}>
{this.props.messages.map（（message，i）=>(
))}
)
}
}
导出默认消息列表

更容易获取应用组件中的数据，将其输入状态并将其向下推到消息列表

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

然后：

<MessageList messages={this.state.messages} />