React無法識別功能

Question

我正在嘗試本教程進行反應聊天並不斷收到錯誤

TypeError: n.props.handleNewUserMessage is not a function

我嘗試使用以下資源解決它：

• https://www.reddit.com/r/reactjs/comments/6fd6nl/keep_getting_error_thispropsonsearch_in_not_a/?st=jhiugk4d&sh=fabd3cc4
• 帶ES6的ReactJS：當我交流兩個組件時，this.props不是一個函數
• 反應TypeError this._test不是函數
• React無法識別我的功能

這是我的代碼：

import React, { Component } from 'react';
import { Widget, addResponseMessage } from 'react-chat-widget';
import 'react-chat-widget/lib/styles.css';

class App extends Component {
  componentDidMount() {
    addResponseMessage("How can I help you?");
  }

  handleNewUserMessage = (newMessage) => {
    console.log(`New message incomig! ${newMessage}`);
    // Now send the message throught the backend API
    addResponseMessage('response');
  }

  render() {
    return (
      <div className="App">
        <Widget />
      </div>
    );
  }
}


export default App;

我哪里出問題了？

Answer 1

正如錯誤所提到的，您忘記了將方法實際添加到道具中：

 <Widget
    handleNewUserMessage={this.handleNewUserMessage}
 />