使用react-chat-widget报错：handleNewUserMessage不是函数求排查

哦，我一眼就发现问题啦！你遇到的TypeError: n.props.handleNewUserMessage is not a function错误，根源在于你没有把定义好的handleNewUserMessage方法传递给<Widget>组件。

react-chat-widget的Widget组件依赖handleNewUserMessage这个props来接收并处理用户发送的消息，你虽然在App组件里定义了这个方法，但没有把它绑定到Widget上，组件自然找不到这个函数，就报错啦。

修改后的完整代码 #

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 incoming! ${newMessage}`);
    // Now send the message through the backend API
    addResponseMessage('response');
  }

  render() {
    return (
      <div className="App">
        {/* 关键：把handleNewUserMessage传递给Widget组件 */}
        <Widget handleNewUserMessage={this.handleNewUserMessage} />
      </div>
    );
  }
}

export default App;

简单说明 #

只需要在<Widget>标签中添加handleNewUserMessage={this.handleNewUserMessage}这个属性，就能让Widget组件正确调用你定义的消息处理方法啦。之后用户发送消息时，你的handleNewUserMessage就会被触发，控制台也能正常打印消息内容，同时返回预设的响应。

内容的提问来源于stack exchange，提问作者Fabian Schneider