反应应用程序中运行的错误

Question

我通过使用react实现了库系统的前端。我已经将nodejs springboot用于此实现。 MongoDB被用作数据库。

当我运行此代码时，我发现有关此代码段的一些错误。我已经逐步实现了这段代码。请检查该代码并帮助我解决我的错误。

 static.Common.js
    var CommonDetails = function() {
        this.API = 'http://localhost:8081'; // node api
        //this.API = 'http://localhost:8084'; // springboot api
    }

    module.exports = new CommonDetails();
    ......................................................................................
    appContainer.jsx
    'use strict';
    import React, {Component}   from 'react';
    import Users                from './Modules/Users';
    import AddUser              from './Controllers/AddUser';
    import axios                from 'axios';

    var Base                    = require('./Statics.Common');

    export default class AppContainer extends Component {
        constructor(props) {
            super(props);
            this.state = {
                users: []
            }
            this.getAllUsers();
        }

        getAllUsers() {
            axios.get(Base.API + '/').then(res => {
                console.log(res);
                this.setState({
                    users: res.data.data || res.data
                });
            })
        }

        addUser(user) {
            axios.post(Base.API + '/', {name: user.name}).then(result => {
                if(result.status == 200) {
                    this.getAllUsers();
                }
            }).catch(err => {
                alert(err);
            })
        }

        render() {
            return <div>
               <h2>Users App</h2>
                <AddUser addUser={user => this.addUser(user)}/>
                <Users users={this.state.users} getAllUsers = {() => this.getAllUsers()}/>
            </div>;
        }
    }
    ......................................................................................................
    //addUser.jsx,Controller
    'use strict';

    import React, {Component}   from 'react';
    import PropTypes            from "prop-types";

    export default class AddUser extends Component {
        static get propTypes() {
            return {
               addUser: PropTypes.func,
               name: PropTypes.string
            }
        }

        constructor(props) {
           super(props);
        }

        onNameChange(event) {
           event.preventDefault();
           event.stopPropagation();
           console.log(event.target.value);
           this.name = event.target.value;
        }

        onSubmit(event) {
            event.preventDefault();
            event.stopPropagation();
            if (this.name) {
               this.props.addUser({name: this.name});
               this.name = '';
            }
        }


        render() {
            return <div>
                <form onSubmit={event => this.onSubmit(event)}>
                   <label>Name:</label>
                   <input type="text" onChange={event => this.onNameChange(event)}/>
                   <button type="submit">Add</button>
                </form>
            </div>;
        }
    }
    .................................................................................................
    User.jsx,Modules
    'use strict';
    import React, {Component}   from 'react';
    import PropTypes            from 'prop-types';
    import axios                from 'axios';
    var Base  = require('../Statics.Common');

    export default class User extends Component {
        static get propTypes() {
            return {
                user: PropTypes.object,
                getAllUsers: PropTypes.func
            }
        }

        constructor(props) {
            super(props);
            this.user = this.props.user;
            this.getAllUsers = this.props.getAllUsers;
        }


        update(id, name) {
            var updatedName = prompt("Please enter updated name:", name);
            axios.put(Base.API + '/' + id, {name: updatedName}).then(results => {
                if(results.status == 200) {
                    this.getAllUsers();
                }
            })
        }

        delete(id) {
            axios.delete(Base.API + '/' + id).then(results => {
                if(results.status == 200) {
                    this.getAllUsers();
                }
            })
        }


        render() {
            return <tr>
                <td>{this.user._id || this.user.id}</td>
                <td>{this.user.name}</td>
                <button onClick={(e) => this.update(this.user._id || this.user.id, this.user.name)}>Update</button>&nbsp;
                <button onClick={(e) => this.delete(this.user._id || this.user.id)}>Delete</button>
            </tr>
        }
    }

    ..............................................................................................................................
    users.jsx
    'use strict';
    import React, {Component}   from 'react';
    import PropTypes            from 'prop-types';
    import User                 from './User.jsx';


    export default class Users extends Component {
      static get propTypes() {
        return {
          users: PropTypes.array
        }
      }

      constructor(props) {
        super(props);
      }

      componentWillReceiveProps(props) {
        this.setState(props)
      }

      render() {
        this.users = this.props.users;
        return <div>
          <table>
            <thead>
              <tr>
                <th>ID</th>
                <th>Name</th>
              </tr>
            </thead>
            <tbody>
              {
                this.users.map(user => {
                  return <User key={user._id || user.id} user={user} getAllUsers={() => this.props.getAllUsers()}/>
                })
              }
            </tbody>
          </table>
      </div>;
      }
    }