按日期排序并进行比较，在React中返回错误的顺序

Question

我从firebase获取数据

componentWillMount() {
  let athleteRef = fire.database()
    .ref("athlete")
    .orderByChild("email")
    .equalTo(this.state.email)

  athleteRef
    .once("value")
    .then((snapshot) => {
      snapshot.forEach((data) => {

        let workload: number = data.val().minutes * data.val().intensity;
        let datas = data.val();

        let workouts = {
          key: data.key,
          date: datas.dateCreated,
          athleteData: data.val(),
          workload: workload,
        };
        this.setState({ workouts: [workouts].concat(this.state.workouts) });
    })
  });
}

我做了这个排序功能

sortByDate(arr) {
  if(this.state.sortedByDate === true) {
    let sorted = arr.sort((a,b) => {
      new Date(a.date).getTime() - new Date(b.date).getTime());
    }
    this.setState({
      workouts: sorted,
      sortedByDate: false,
    });
  } else {
    let sorted = arr.sort((a,b) => {
      new Date(b.date).getTime() - new Date(a.date).getTime());
    }
    this.setState({
      workouts: sorted,
      sortedByDate: true,
    });
  }
}

数组经过desc排序后的样子如下（通知年份2016）：

Array (11)
{key: "-KyocQLyhpwVHCpKJOBv", date: "13/11/2017", athleteData: Object, workload: 1}
{key: "-KyR0ovLXga6zlHX4J40", date: "08/11/2017", athleteData: Object, workload: 30}
{key: "-KyPny-m5OjAdK0C133e", date: "08/11/2017", athleteData: Object, workload: 80}
{key: "-KvRKjbTmbvajvcijYl2", date: "02/10/2017", athleteData: Object, workload: 72}
{key: "-KvOv-2gZ1U46btx62Lg", date: "01/09/2017", athleteData: Object, workload: 120}
{key: "-KyR0rqVt34A-_TYdpH9", date: "01/01/2017", athleteData: Object, workload: 60006}
{key: "-KyR0qf78bi7S1xE7QyE", date: "01/01/2017", athleteData: Object, workload: 100000}
{key: "-KvXHVN6MsfQS-j6aAx9", date: "01/01/2017", athleteData: Object, workload: 100000}
{key: "-KyR0kW7WWE9N5SIM9hz", date: "01/01/2016", athleteData: Object, workload: 5000000000}
{key: "-KvMBqOTfcQpf1nJsY-V", date: "21/09/2017", athleteData: Object, workload: 80}
{key: "-KvMBbaNmbeg9h66YNoj", date: "01/10/2017", athleteData: Object, workload: 100}

运行函数的asc部分后，我得到：

{key: "-KyocQLyhpwVHCpKJOBv", date: "13/11/2017", athleteData: Object, workload: 1}
{key: "-KyR0kW7WWE9N5SIM9hz", date: "01/01/2016", athleteData: Object, workload: 5000000000}
{key: "-KyR0rqVt34A-_TYdpH9", date: "01/01/2017", athleteData: Object, workload: 60006}
{key: "-KyR0qf78bi7S1xE7QyE", date: "01/01/2017", athleteData: Object, workload: 100000}
{key: "-KvXHVN6MsfQS-j6aAx9", date: "01/01/2017", athleteData: Object, workload: 100000}
{key: "-KvOv-2gZ1U46btx62Lg", date: "01/09/2017", athleteData: Object, workload: 120}
{key: "-KvRKjbTmbvajvcijYl2", date: "02/10/2017", athleteData: Object, workload: 72}
{key: "-KyR0ovLXga6zlHX4J40", date: "08/11/2017", athleteData: Object, workload: 30}
{key: "-KyPny-m5OjAdK0C133e", date: "08/11/2017", athleteData: Object, workload: 80}
{key: "-KvMBqOTfcQpf1nJsY-V", date: "21/09/2017", athleteData: Object, workload: 80}
{key: "-KvMBbaNmbeg9h66YNoj", date: "01/10/2017", athleteData: Object, workload: 100}

所以...是的，这几乎是正确的，但一些记录全都不合适:)

我也尝试过和

moment().format("YYYY-MM-DD")

但这给出了相同的输出...关于为什么的任何建议？ 谢谢！

Answer 1

不鼓励将字符串传递给Date构造函数， 有关更多信息，请参见date MDN页面 。 对其进行排序的正确方法是使用Moment并将其传递给格式，然后将其转换为用于排序的时间戳。

为了提高可读性，我将其移至单独的函数和通用数据中（请确保您使用的是date ）：

const data = [//this is your data]
const dateFormat = 'DD/MM/YYYY'
const sorted = data.sort(
 (a, b) =>
 moment(a, dateFormat).unix() - moment(b, dateFormat).unix()
)

另一件事是，在React中设置setState是异步的，因为它可能被批处理或推迟到以后。 根据前一个设置状态的正确方法是使用传递给setState回调。 您的示例的简化代码为：

this.setState(state => {
  return {
    sortedByDate: !state.sortedByDate,
    sorted: // do sorting here :)
  }
})