Reactjs 在字段上按排序顺序反应渲染模型

下面是用于呈现html内容的react脚本

import React, { Component, PropTypes } from 'react';
import cx from 'classnames';
import moment from 'moment';
import AppLink from '../containers/AppLinkContainer';
import { createReservationLink } from '../utils/link-creators';

export default class ReceiptListItem extends Component {

    static propTypes = {
        className: PropTypes.string,
        children: PropTypes.node,
        model: PropTypes.object
    };

    render() {
        const { className, children, model } = this.props;

        return (
            <AppLink to={createReservationLink({ reservationId: model.id })} className={cx('ReceiptListItem margin-top-3 padding-bottom-3 border-bottom-1', className)}>
                <figure className="ReceiptListItem-figure">
                    <img src={model.venue.thumb_image_url} alt={model.venue.about} />
                </figure>
                <div className="ReceiptListItem-content">
                    <div className="ReceiptListItem-contentInner">
                        <h3>{model.section.location}, {model.venue.name}</h3>
                        <p className="color-lightMuted">{moment(model.reservation_date).format('dddd MMMM Do')}</p>
                        <p className="color-lightMuted">Status : {model.reservation_status}</p>
                    </div>
                </div>
            </AppLink>
        );
    }

}

这将显示来自后端的列表。我想按model.reservation\u日期的降序显示此列表

---

任何指针都将受到欢迎。

首先，您需要将对象转换为数组。下划线在一行中完美地完成：

var newArr = _(yourObject).toArray();

其次，使用lodash/sortBy对您的newArr进行排序。排序后使用reverse可实现降序

_.sortBy(newArr).reverse();

---

使用array.proto.sort和lib-like-moment或者简单地比较vanilla JS中的ISO日期字符串，将您的预订属性设置为数组并按日期排序。我打赌预订现在是一个对象，从BE获取？是的预订是一个从后端获取的对象。您知道将对象转换为数组并对其进行排序的确切代码吗？现在很容易混淆。您想显示一个项目列表（我想是一个预订列表），但您只能从BE中获得一个对象。您只获得一项预订，或者您所指的列表是否隐藏在预订对象的某个位置？您是否将reservation.line_项目作为列表？我的错，我输入了错误的代码。上面是整个文件。我想根据预订日期按降序排列模型列表。模型仍然是一个对象。