React Chatbox，如何显示字符串？

Question

我是新手，正在尝试使用AWS和React构建一个简单的餐厅推荐Web应用程序。因此，我正在使用此聊天窗口（https://www.npmjs.com/package/react-chat-window）。基本上，当用户键入内容时，聊天机器人会被触发并询问诸如“您想要哪种食物？”之类的问题。到目前为止，我已经能够传递用户的输入并从AWS取回响应。我可以将响应记录到控制台并进行验证。但是我无法在聊天框中显示响应。

这是代码段

class chatBox extends Component {
    constructor() {
        super();
        this.state = {
            messageList: chatHistory,
            newMessagesCount: 0,
            isOpen: false
        };
    }

    // message is the user's input
    _onMessageWasSent(message) {
        var body = {
            messages: message.data['text']
        }
        // every time the user types something, this function passes the user's input to AWS
        apigClient.invokeApi(pathParams, pathTemplate, method, additionalParams, body)
            .then(function (result) { // result contains the response to the user's input
                var text = result.data.body
                console.log(text)   // logs the response to the user's input
                console.log(text.length)
            }).catch(function (result) {
            });

        this.setState({ //this displays what the user types
            messageList: [...this.state.messageList, message]
        })
    }


    // This is a function that displays the input of the other side
    // I can manually test it and see that whatever I pass to this function gets displayed as
    // the other person's speech, not the user.
    _sendMessage(text) {
        console.log("sendMessage")
        if (text.length > 0) {
            this.setState({
                messageList: [...this.state.messageList, {
                    author: 'them',
                    type: 'text',
                    data: { text }
                }],
                newMessagesCount: this.state.newMessagesCount + 1
            })
        }
    }

可以看出，我正在将响应记录到控制台。现在，我想显示响应，因此我在构造函数中尝试过]

this._onMessageWasSent = this._sendMessage.bind(this)
并在_onMessageSent内调用函数

apigClient.invokeApi(pathParams, pathTemplate, method, additionalParams, body)
            .then(function (result) { // result contains the response to the user's input
                var text = result.data.body
                console.log(text)   // logs the response to the user's input
                console.log(text.length)
                this._sendMessage(text) // Calling the function
            }).catch(function (result) {
            });

        this.setState({ //this displays what the user types
            messageList: [...this.state.messageList, message]
        })
    }

我可以看到_sendMessage函数被触发，因为我有一个console.log。但是现在，聊天框既不显示用户也不显示聊天机器人。如果我不绑定this._onMessageWasSent = this._sendMessage.bind（this），至少我会显示用户。

可能是什么问题？

这是我的render（）

render() {
        return (<div>
            <Launcher
                agentProfile={{
                    teamName: 'Foodophile',
                    imageUrl: 'https://a.slack-edge.com/66f9/img/avatars-teams/ava_0001-34.png'
                }}
                onMessageWasSent={this._onMessageWasSent.bind(this)}
                messageList={this.state.messageList}
                onFilesSelected={this._onFilesSelected.bind(this)}
                newMessagesCount={this.state.newMessagesCount}
                handleClick={this._handleClick.bind(this)}
                isOpen={this.state.isOpen}
                showEmoji
            />
        </div>)
    }

UPDATE

class chatBox extends Component {
    constructor(props) {
        super(props);
        this.state = {
            messageList: chatHistory,
            newMessagesCount: 0,
            isOpen: false
        };
        this._onMessageWasSent = this._onMessageWasSent.bind(this);
        this._onFilesSelected = this._onFilesSelected.bind(this);
        this._handleClick = this._handleClick.bind(this);
        this._sendMessage = this._sendMessage.bind(this);
    }
    _onMessageWasSent(message) {
        var body = {
            messages: message.data['text']
        }

        apigClient.invokeApi(pathParams, pathTemplate, method, additionalParams, body)
            .then(function (result) {
                var text = result.data.body
                console.log(text)
                console.log(text.length)
                this._sendMessage(text)
            }).catch(function (result) {
            });
        this.setState({
            messageList: [...this.state.messageList, message]
        })
    }

    _sendMessage(text) {
        console.log("sendMessage")
        if (text.length > 0) {
            this.setState({
                messageList: [...this.state.messageList, {
                    author: 'them',
                    type: 'text',
                    data: { text }
                }],
                newMessagesCount: this.state.newMessagesCount + 1
            })
        }
    }
    render() {
        return (<div>
            <Launcher
                agentProfile={{
                    teamName: 'Foodophile',
                    imageUrl: 'https://a.slack-edge.com/66f9/img/avatars-teams/ava_0001-34.png'
                }}
                onMessageWasSent={this._onMessageWasSent}
                messageList={this.state.messageList}
                onFilesSelected={this._onFilesSelected}
                newMessagesCount={this.state.newMessagesCount}
                handleClick={this._handleClick}
                isOpen={this.state.isOpen}
                showEmoji
            />
        </div>)
    }

我是新手，正在尝试使用AWS和React构建一个简单的餐厅推荐Web应用程序。因此，我正在使用此聊天窗口（https://www.npmjs.com/package/react-chat-window）。基本上，当...

Answer 1

您必须将类方法绑定在类组件中，才能使用this进行调用。但是您必须这样做，例如在构造函数中，但不在您的渲染函数中！