在 React 中获取 Rocketchat 历史记录

Posted 2023-03-03

【中文标题】在 React 中获取 Rocketchat 历史记录

【英文标题】：Getting Rocketchat History in React

【发布时间】：2018-05-10 12:24:25

【问题描述】：

我正在用 React 为 Rocket.Chat 写一个简单的聊天客户端。 目前可以向服务器发送消息并在消息列表中显示已发送的消息。 现在我希望客户端从服务器获取最后一条消息并将其显示在我的消息列表中。 为此有一个 API 端点：https://rocket.chat/docs/developer-guides/rest-api/channels/history。

我想知道如何在我的 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

【参考方案1】：

更容易在 App 组件中获取数据，将其放入状态并将其推送到消息列表。

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