如何修復“無法讀取未定義的屬性'sendMessage'”反應聊天系統

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);
.
. 
.
}