Question

我有以下反应模块和类，我有用户模块，用户模块，添加新用户的添加用户模块和用于显示用户的应用程序容器模块和具有api URL的静态公共文件。但路由似乎不起作用。任何的想法？

user.jsx - 定义用户。它有get，put，post，delete功能

public JsonResult Get(int id)
    {
        var test = new WmsInformation();
        test.WmsInfos = new List<WmsInfo>
        {
            new WmsInfo { StoreName = "SE001", ItemName = "Item1" , ItemQty = "10"},
            new WmsInfo { StoreName = "SE002", ItemName = "Item2" , ItemQty = "115"}
        };

        return new JsonResult(test);
    }

Answer 1

控制器-> AddUser.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>;
  }
}

Answer 2

模块-> User.jsx

'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>;
  }
}

Answer 3

APP.JSX

'use strict';
import React            from 'react';
import {render}         from 'react-dom';
import AppContainer     from './AppContainer.jsx';

render(<AppContainer/>, document.getElementById('app'));

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 => {
            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>;
    }
}

Statics.Common.js

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

module.exports = new CommonDetails();

webpack.config.js

const path = require('path');

module.exports = {
    entry: path.resolve(__dirname, "app.jsx"),
    output: {
       path: path.resolve(__dirname, "dist"),
       filename: 'bundle.js'
    },
    module: {
       rules: [
           {
               test: /\.jsx?$/,
               use: {
                   loader: "babel-loader",
                   options: {
                       presets: ["env", "es2015", "react"]
                   }
               }
           }
       ]
    },
    resolve: {
       extensions: [".js", ".jsx"]
    },
    devServer: {
       contentBase: path.join(__dirname, "/"),
       compress: true
    },
    devtool: "source-map"
};

反应路由。不能让这个工作

3 个答案: