Question

///我试图按日期顺序显示数组值。像“ 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>
                );
              })
            }

//谢谢

Answer 1

忘记上面的东西，只需在下面修改，

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

Answer 2

排序功能是什么？如果不在render()中，那就是您的问题

Answer 3

@Abhigyan Gaurav

尝试下面的代码

cost_function

谢谢

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

3 个答案: