按日期排序并进行比较，在 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 构造函数see date MDN page for more。对其进行排序的正确方法是使用 Moment 并将其传递格式并将其转换为用于排序的时间戳。

为了可读性，我将其移至单独的函数和通用数据（确保您访问date poperty）：

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 :)
  }
})