如何在 react-native 中按日期按升序显示数组数据答案

【问题标题】：how to display array data in in acceding order on date wise in react-native如何在 react-native 中按日期按升序显示数组数据
【发布时间】：2019-06-26 11:15:08
【问题描述】：

// 我试图在加入顺序日期明智地显示数组值。像“rechargeHistoryDetails”[] 它包含 4 个值，每个值都有chargeDate，我想要实现的是，最近日期的值应该首先出现在屏幕上，然后是下一个等等。我尝试了 sort() 函数，但它不起作用这里。我必须以以下 4 种日期格式显示数据，“2017-01-14”的值应该在列表中排在首位，然后是“2015-11-14”，然后是下一个.. 请建议我该怎么做。

1.2017-01-14
2.2015-11-14
3.2015-02-14
4.2014-08-13

 const {customer,rechargeDeatails} = this.props;

   rechargeHistoryDetails: Array(4)
    0:
    balance: 100
    chargeDate: "2014-08-13T14:16:23.000+01:00"
    serialNumber: 2627423951927890
    __typename: "RechargeHistoryDetails"

    1:
    balance: 5006
    chargeDate: "2015-02-14T22:48:53.000+01:00"
    serialNumber: 1696013838876544
    __typename: "RechargeHistoryDetails"

    2:
    balance: 5002
    chargeDate: "2017-01-14T22:48:53.000+01:00"
    serialNumber: 1696013838876548
    __typename: "RechargeHistoryDetails"


    3:
    balance: 5000
    chargeDate: "2015-11-14T22:48:53.000+01:00"
    serialNumber: 1696013838876550
    __typename: "RechargeHistoryDetails"

          {
              rechargeDeatails.rechargeHistoryDetails.map(
                ({balance,cardType,chargeDate,serialNumber},index)=>{
                return (
                <View style={{marginBottom: 10}} key={index}>
                    <Card>
                    <CardItem header style={{backgroundColor: '#fff', width: '100%', justifyContent: 'space-between', borderBottomColor: '#f1f1f1', borderBottomWidth: 1}}>
                      <View style={{flexDirection:'column',justifyContent: 'space-between'}}>
                        <View>
                          <RegularText text={`₦ ${balance}`} style={{ fontWeight: 'bold' }}/>
                          <SmallText text={`Recharged on ${formatDateTime(chargeDate)}`} textColor="grey"/>
                        </View>
                      </View>

                    </CardItem>
                      <CardItem>
                        <Body>
                          <View style={{flexDirection:'row', width: '100%',justifyContent: 'space-between',}}>
                            <View style={{ flexDirection:'row', flexWrap: 'wrap',alignItems: "flex-start"}}>
                                <View>
                                    <SmallText  text="Serial#" textColor="grey"/>
                                    <Text style={{ fontWeight: 'bold', fontSize:12 }}>{serialNumber}</Text>
                                </View>
                            </View>
                            <View style={{ flexDirection:'row', flexWrap: 'wrap',alignItems: "flex-start"}}>
                              <View>
                                <SmallText  text="Channel" textColor="grey"/>
                                <Text style={{ fontWeight: 'bold', fontSize:12 }}>Voucher</Text>
                              </View>
                            </View>

                          </View>
                        </Body>
                      </CardItem>
                    </Card>
                  </View>
                );
              })
            }

//谢谢

【问题讨论】：

查看这篇文章stackoverflow.com/questions/10123953/…
能否请您在我的代码中提出建议
Sort Javascript Object Array By Date的可能重复
React 正在使用 javascript。您要做的是纯 javascript，因此请尝试查找@AndrewKachnic 建议的帖子
在那个 array.sort() 函数正在被使用，但在反应原生它的抛出错误..

标签： reactjs react-native ecmascript-6

【解决方案1】：

忘记上面的事情，只需修改下面，

     import _ from 'lodash';
   _.sortBy(rechargeDeatails.rechargeHistoryDetails, ["chargeDate"]).reverse().map(

【讨论】：

【解决方案2】：

排序的作用是什么？如果它不在render() 中，那是你的问题

【讨论】：

根据您的建议，我必须使用rechargeHistoryDetails.sort()，是吗？所以当我这样做时，它会出错

【解决方案3】：

@Abhigyan Gaurav

试试下面的代码

sortdatalist = (data) =>  {
        return data.sort((a, b) => {
            let result = null;
            if (a.userprio != null) {
                var dateA = new Date(a.chargeDate).getTime();
                var dateB = new Date(b.chargeDate).getTime();
            }
            result = dateA < dateB ? 1 : -1;
            return result;
        });
    }




let sortedData = this.sortdatalist(rechargeHistoryDetails)

谢谢

【讨论】：