使用 react 和 node.js 制作聊天机器人时出错

Question

我在 udemy 的教程课程的帮助下制作了这个聊天机器人。 到目前为止，我已经制作了一个 dialogflow 代理并创建了意图和所有内容，并且在不同模块的帮助下，我还设置了应用程序的服务器端。现在在制作网站的聊天机器人模块时，我遇到了 5 个错误。

这是我的 setupProxy.js 文件代码：

const { createProxyMiddleware } = require('http-proxy-middleware');
     
/*module.exports = (app) => {
    app.use(createProxyMiddleware("/api/*", { target: "http://localhost:5000"}));
}*/

module.exports = function(app) {
    app.use('/api/*', createProxyMiddleware({ target: 'http://localhost:5000', changeOrigin: true}));
  };

这是我的 Chatbot.js 文件代码：

import React, { Component } from 'react';
import axios from 'axios/index';
import Message from './Message';

class Chatbot extends Component {

    constructor(props){
        super(props);

        this._handleInputKeyPress = this._handleInputKeyPress.bind(this);

        this.state = {
             messages: []
        }
    }
    async df_text_query(text){
        let says = {
            speaks: 'me',
            msg: {
                text: {
                    text: text
                }
            }
        };
        this.setState({messages: [...this.state.messages, says]});
        const res = await axios.post('/api/df_text_query', {text});

        for (let msg of res.data[0].queryResult.fulfillmentMessages){
            says = {
                speaks: 'bot',
                msg: msg
            };
            this.setState({messages: [...this.state.messages, says]});
        }
    }

    async df_event_query(event){

        const res = await axios.post('/api/df_event_query', {event});

        for (let msg of res.data[0].queryResult.fulfillmentMessages){      /*let msg of res.data.fulfillmentMessages*/
            let says = {
                speaks: 'me',
                msg: msg
            };
            this.setState({ messages: [...this.state.messages, says]});
        }
    }
     
    componentDidMount(){
        this.df_event_query('Welcome');
    }

    renderMessages(stateMessages){
        if (stateMessages){
            return stateMessages.map((message, i) =>{
                return <Message key={i} speaks={message.speaks} text={message.msg.text.text}/>;
            });
        }
        else{
            return null;
        }
    }
    
    _handleInputKeyPress(e){
        if(e.key === 'Enter'){
            this.df_text_query(e.target.value);
            e.target.value = '';
        }
    }

    render(){
        return (
            <div style = {{ height: 400, width: 400, float: 'right' }}>
                <div id = "chatbot" style = {{height: '100%', width: '100%', overflow: 'auto'}}>
                    <h2>Admissa</h2>
                    {this.renderMessages(this.state.messages)}
                    <input type = "text" onKeyPress = {this._handleInputKeyPress} />
                </div>
            </div>
        )
    }
}
   
export default Chatbot;

这是 Message.js 文件的代码：

import React from 'react';

const Message = (props) => {
    <div className="col s12 m8 offset-m2 offset-13">
        <div className="card-panel grey lighten-5 z-depth-1">
            <div className="row valign-wrapper">
                {props.speaks ==='bot' &&
                <div className="col s2">
                <a href="#" class="btn-floating btn-large waves-effect waves-light red">{props.speaks}</a>
                </div>
                }
                <div className="col s10">
                    <span className="black-text">
                        {props.text}
                    </span>
                </div>
                {props.speaks ==='me' &&
                <div className="col s2">
                <a href="#" class="btn-floating btn-large waves-effect waves-light red">{props.speaks}</a>
                </div>
                }
            </div>
        </div>
    </div>
};

export default Message;

这是我的主要 app.js 文件：

import React from 'react';
import { BrowserRouter, Route } from 'react-router-dom';

import Header from './Header';
import Home from './pages/Home';
import AboutUs from './pages/AboutUs';
import Chatbot from './chatbot/Chatbot';

const App = () => {
    return (
        <div>
            <BrowserRouter>
                <div className = "container">
                    <Header/>
                    <Route exact path = "/home" component = { Home }/>
                    <Route exact path = "/aboutus" component = { AboutUs } />
                    <Chatbot/>
                </div>           
            </BrowserRouter>
        </div>
    )
}
export default App;

当我在命令提示符下使用 npm run dev 运行此程序时，出现以下错误：

5 errors after running the server for the frontend