Question

我正在使用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

预期的输出是我按Enter键后显示在消息框中的消息，但我得到了：

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() {

Answer 1

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

this.undefined.sendMessage(...)

显然不起作用。

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

Answer 2

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

constructor(props) {
super(props);
.
. 
.
}

如何修复“无法读取未定义的属性'sendMessage'”反应聊天系统

2 个答案: