按工作日（例如，星期一、星期二、星期三...）对日程表进行排序

Question

我正在尝试解决我的代码中的问题。我有一个硬编码的状态数据，假设它来自 API 调用。默认情况下，operationHours 的 API 数据未正确排序，在我的情况下，星期四排在第一位而不是星期一。我的问题是，每当我映射数据时，我都想按星期几（星期一、星期二、星期三……）对它们进行排序。我在这里做了一个沙箱https://codesandbox.io/s/crazy-booth-4gwfi

class App extends Component {
  state = {
    data: {
      name: "Starbucks",
      operationHours: {
        thursday: { from: "8:00", to: "20:00" },
        friday: { from: "8:00", to: "20:00" },
        saturday: { from: "8:00", to: "20:00" },
        sunday: { from: "8:00", to: "20:00" },
        monday: { from: "8:00", to: "20:00" },
        tuesday: { from: "8:00", to: "20:00" },
        wednesday: { from: "8:00", to: "20:00" }
      }
    }
  };
  render() {
    return (
      <div>
        <h2>{this.state.data.name}</h2>
        {Object.keys(this.state.data.operationHours).map(dayOfWeek => (
          <div key={dayOfWeek} className="day-of-week">
            {`${dayOfWeek} - ${moment(
              this.state.data.operationHours[dayOfWeek].from,
              "HH:mm"
            ).format("hh:mm A")} -
            ${moment(
              this.state.data.operationHours[dayOfWeek].to,
              "HH:mm"
            ).format("hh:mm A")}`}
          </div>
        ))}
      </div>
    );
  }
}

Answer 1

而不是

{Object.keys(this.state.data.operationHours).map(dayOfWeek => (
      <div key={dayOfWeek} className="day-of-week">

取一个按日期排序的数组，例如

{['monday', 'tuesday', 'wednesday'].map(dayOfWeek => (
      <div key={dayOfWeek} className="day-of-week">

按工作日（例如，星期一、星期二、星期三...）对日程表进行排序

Sort Schedule Order by Week Day (e.g Monday, Tuesday, Wednesday...)

javascript

reactjs