Сортировка данных в состоянии после получения json из api в React Redux

Question

У меня вопрос по сортировке данных в React. Я искал решение, но не могу понять, как это сделать. Мне нужно отсортировать «платежи» по идентификатору DES C или по дате DES C. Как я мог это сделать? У меня есть код со списком платежей (Payments. js) и компонентом (Payment. js). Спасибо

Платежи. js

class Payments extends Component {
    componentDidMount() {
        this.props.getAllPayments();
    }
    render() {
        const { payments } = this.props.payments;

        return(
            <div className='dashboard container text-center'>
                <div className='row entry'>
                <div className='col-sm-1'>
                    <span><strong>ID</strong></span>
                </div>
                <div className='col-sm-2'>
                    <span><strong>Date</strong></span>
                </div>
                <div className='col-sm-4'>
                    <span><strong>Name</strong></span>
                </div>
                <div className='col-sm-5'>
                    <span><strong>Lastname</strong></span>
                </div>
                </div>
                { payments.map(payment => {
                    return (

                        <Payment payment={payment} key={payment.id} />
                    )
                })}
            </div>
        )

    }
}



Payments.propTypes = {
    getAllPayments: PropTypes.func.isRequired,
    payments: PropTypes.object.isRequired
};


const mapStateToProps = state => {
    return {
        payments: state.payment

    }
}

export default connect(mapStateToProps, {getAllPayments})(Payments);

Оплата. js

class Payment extends Component{

    componentDidMount() {
        this.props.getAllUsers();
    }

    render() {

        const { users } = this.props.users;
        const { payment } = this.props;
        return (

            <div className='row entry'>
                <div className='col-sm-1'>
                    <span>{payment.id}</span>
                </div>
                <div className='col-sm-2'>
                    <span >{payment.date}</span>
                </div>
                <div className='col-sm-4'>

                    <span>
                        { users.map(user => {
                        return (
                            (payment.userId === user.id)&&user.name

                        )
                    })}
                    </span>
                </div>
                <div className='col-sm-5'>
                    <span>
                        { users.map(user => {
                         return (
                             (payment.userId === user.id)&&user.lastname

                         )
                     })}
                    </span>
                </div>
            </div>
        )
    }


}


Payment.propTypes = {
    users: PropTypes.object.isRequired
};


const mapStateToProps = state => {
    return {
        users: state.user

    }
}


export default connect(
    mapStateToProps, {  getAllUsers }
)(Payment);

Answer 1

Вы можете отсортировать информацию до того, как она попадет в ваш магазин, изменив свой Payments Reducer перед возвратом нового состояния.

Если ваши идентификаторы являются инкрементными числами, используйте функцию sort() для сортировки по номеру идентификатора.

Примечание: если ваши идентификаторы генерируются случайным образом, то их почти невозможно отсортировать по этому значению .

Ниже приведен пример функции сортировки:

arr.sort((a,b) => {
   const keyA = a.id,
   const keyB = b.id;
   // Compare the 2 ids
   if (keyA < keyB) return -1;
   if (keyA > keyB) return 1;
   return 0;
});

Если вы хотите отсортировать их по дате, это может быть что-то вроде этого:

arr.sort((a, b) => {
   var keyA = new Date(a.date),
   keyB = new Date(b.date);
   // Compare the 2 dates
   if (keyA < keyB) return -1;
   if (keyA > keyB) return 1;
   return 0;
 });