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

Question

I am building a chat system with react and chatkit. I have a function called sendMessage in App.js that sends whatever the user type in the sendMessage Form to display it in the MessageList Component.

this is 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

And this is sendMessageForm.js component.

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

the expected output is the message showing up in the messages box after i hit enter but I get this:

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

As others have answered, your currentUser class property is undefined, and as such can't have a sendMessage method. Your code essentially looks like this:

this.undefined.sendMessage(...)

which obviously can't work.

You probably forgot to set currentUser 's value (I guess it has a sendMessage method).

Answer 2

In your sendMessageForm.js File Change the first two lines of constructor to this

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