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">

按工作日（例如星期一，星期二，星期三...）对计划顺序排序

1 个答案: