0

我正在用 react 和 chatkit 构建一个聊天系统。我在 App.js 中有一个名为 sendMessage 的函数，它发送 sendMessage 表单中的任何用户类型以在 MessageList 组件中显示它。

这是App.js

import Chatkit from '@pusher/chatkit'
import MessageList from './components/MessageList'
import SendMessageForm from './components/SendMessageForm'
import RoomList from './components/RoomList'
import NewRoomForm from './components/NewRoomForm'

import { tokenUrl, instanceLocator } from './config'

class App extends React.Component {

    constructor() {
        super()
        this.state = {
            messages: []
        }
        this.sendMessage = this.sendMessage.bind(this)
    } 

    componentDidMount() {
        const chatManager = new Chatkit.ChatManager({
            instanceLocator,
            userId: 'Ismail',
            tokenProvider: new Chatkit.TokenProvider({
                url: tokenUrl
            })
        })

        chatManager.connect()
        .then(currentUser => {
            this.currentUser = currentUser
            this.currentUser.subscribeToRoom({
                roomId: 24622056,
                hooks: {
                    onNewMessage: message => {
                        this.setState({
                            messages: [...this.state.messages, message]
                        })
                    }
                }
            })
        })
    }

    sendMessage(text) {
        this.currentUser.sendMessage({
            text,
            roomId: 24622056
        })
    }

    render() {
        return (
            <div className="app">
                <RoomList />
                <MessageList messages={this.state.messages} />
                <SendMessageForm sendMessage={this.sendMessage} />
                <NewRoomForm />
            </div>
        );
    }
}

export default App

这是sendMessageForm.js组件。

import React from 'react'

class SendMessageForm extends React.Component {

    constructor() {
        super()
        this.state = {
            message: ''
        }
        this.handleChange = this.handleChange.bind(this)
        this.handleSubmit = this.handleSubmit.bind(this)
    }

    handleChange(e) {
        this.setState({
            message: e.target.value
        })
    }

    handleSubmit(e) {
        e.preventDefault()
        this.props.sendMessage(this.state.message)
    }

    render() {
        return (
            <form
                onSubmit={this.handleSubmit}
                className="send-message-form">
                <input
                    onChange={this.handleChange}
                    value={this.state.message}
                    placeholder="Type your message and hit ENTER"
                    type="text" />
            </form>
        )
    }
}

export default SendMessageForm

预期的输出是我按回车后出现在消息框中的消息，但我得到了这个：

TypeError: Cannot read property 'sendMessage' of undefined
App.sendMessage
src/App.js:46
  43 | }
  44 | 
  45 | sendMessage(text) {
> 46 |     this.currentUser.sendMessage({
     | ^  47 |         text,
  48 |         roomId: 24622056
  49 |     })
View compiled
SendMessageForm.handleSubmit
src/components/SendMessageForm.js:22
  19 | 
  20 | handleSubmit(e) {
  21 |     e.preventDefault()
> 22 |     this.props.sendMessage(this.state.message)
     | ^  23 | }
  24 | 
  25 | render() {
4

2 回答 2

0

正如其他人所回答的那样，您的currentUser类属性是未定义的，因此不能有sendMessage方法。您的代码基本上如下所示：

this.undefined.sendMessage(...)

这显然行不通。

您可能忘记设置currentUser's 值（我猜它有一个sendMessage方法）。

于 2019-07-07T19:50:33.677 回答
0

在您的 sendMessageForm.js 文件中将构造函数的前两行更改为此

constructor(props) {
super(props);
.
. 
.
}
于 2019-07-08T10:14:40.863 回答