Question

我正在为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

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

在React中获取Rocketchat历史记录

1 个答案: