Как исправить "Реакцию чата" Не удается прочитать свойство 'sendMessage' из неопределенного "

Question

Я строю систему чата с реагировать и чаткит.У меня есть функция с именем sendMessage в App.js, которая отправляет любой тип пользователя в форме 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() {

Answer 1

В вашем файле sendMessageForm.js Измените первые две строки конструктора на этот

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

Answer 2

Как уже отвечали другие, ваше свойство класса currentUser не определено, и поэтому не может иметь метод sendMessage. Ваш код по сути выглядит так:

this.undefined.sendMessage(...)

что явно не может работать.

Вы, вероятно, забыли установить значение currentUser (я думаю, у него есть метод sendMessage).