MERN堆栈-排序表

Question

所以，我已经和这个做了好几个小时的斗争，为了我的生命，我想不出如何简单地订购表中的列表项目。这些数据正在使用Axios从MongoDB中提取。

I使用MongoDB Express React和NodeJS

GitHub回购：https://github.com/MattGHicks/BrailleWorks-App

任何帮助都将不胜感激。

我希望该项目按"workorder_po“自动排序，加载"workorders-list”compenent。

下面的是workorders-list.component.js文件.

​

import React, {Component} from 'react';
import { Link } from 'react-router-dom';
import axios from 'axios';


const WorkOrder = props => (
    <tr>
        <td className={props.workorder.workorder_completed ? 'completed' : ''}>{props.workorder.workorder_po}</td>
        <td className={props.workorder.workorder_completed ? 'completed' : ''}>{props.workorder.workorder_name}</td>
        <td className={props.workorder.workorder_completed ? 'completed' : ''}>{props.workorder.workorder_status}</td>
        <td className={props.workorder.workorder_completed ? 'completed' : ''}>{props.workorder.workorder_shippingFrom}</td>
        <td className={props.workorder.workorder_completed ? 'completed' : ''}>{props.workorder.workorder_completionDate}</td>
        <td>
            <Link className="btn btn-sm btn-primary" to={"/edit/"+props.workorder._id}>Edit</Link>
            <Link className="btn btn-sm btn-danger" to={"/remove/"+props.workorder._id}>Remove</Link>
            <a className={props.workorder.workorder_completed ? 'btn btn-sm btn-info' : 'invisible'} href={"https://tools.usps.com/go/TrackConfirmAction?tRef=fullpage&tLc=2&text28777=&tLabels="+props.workorder.workorder_tracking+"%2C" } target="_blank">Tracking</a>

        </td>
    </tr>
);


export default class WorkOrdersList extends Component {

    constructor(props) {
        super(props);
        this.state = {workorders: []};
    }

    componentDidMount() {
        axios.get('http://matthicksdev.com:4000/workorders/')
            .then(response => {
                this.setState({workorders: response.data});
            })
            .catch(function (error) {
                console.log(error);
            })
    }

    componentDidUpdate() {
        axios.get('http://matthicksdev.com:4000/workorders/')
        .then(response => {
            this.setState({workorders: response.data});
        })
        .catch(function (error) {
            console.log(error);
        })   
    }

    workorderList() {
        return this.state.workorders.map(function(currentWorkOrder, i) {
            return <WorkOrder workorder={currentWorkOrder} key={i} />;
        });
    }

    render() {
        return (
            <div>
                <h3>Work Order Status List</h3>
                <table className="table table-sm table-striped table-dark" style={{ marginTop: 20 }}>
                    <thead>
                        <tr>
                            <th>Job ID</th>
                            <th>Name</th>
                            <th>Status</th>
                            <th>Shipping From</th>
                            <th>Completion/Ship Date</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        { this.workorderList() }
                    </tbody>
                </table>
            </div>
        )
    }
}

​

Answer 1

这只是将".sort({ workorder_po：-1 })“添加到'server.js‘文件中的路由中的问题。

明白了!

workorderRoutes.route('/').get(function(req, res) {
    WorkOrder.find(function(err, workorders) {
        if (err) {
            console.log(err);
        } else {
            res.json(workorders);
        }
    }).sort({ workorder_po: -1 });
});