Блог

Создавая веб-приложение для аренды жилья для отдыха, у меня есть компонент, который получает сделанные пользователями заказы и отображает их в их профиле. вот список дат из бронирования, который извлекается из API:

 0: "2021-05-01T00:00:00.000Z"
1: "2021-05-02T00:00:00.000Z"
2: "2021-05-03T00:00:00.000Z"
3: "2021-05-04T00:00:00.000Z"
4: "2021-05-05T00:00:00.000Z"
 

Это правильные даты, поэтому я знаю, что база данных и API все в порядке

Теперь в моем приложении react я отображаю эти даты с помощью moment, и каким-то образом, хотя даты охватывают период с 1 по 5 мая, в пользовательском интерфейсе отображаются даты с 30 апреля по 4 мая. Вот код для отображения дат в моем приложении:

 {bookings.length > 0 ? (
        <Row gutter={18}>
          <Table striped bordered hover>
            <thead>
              <tr>
                <th>#</th>
                <th>Number Of Guests</th>
                <th>Start Date</th>
                <th>End Date</th>
              </tr>
            </thead>
            {bookings.map((booking, index) => (
              <tbody>
                <tr>
                  <td>{index}</td>
                  <td>{booking.numberOfGuests}</td>
                  <td>{moment(booking.dates[0]).format('MMM DD YYYY')}</td>
                  <td>
                    {moment(booking.dates[booking.dates.length - 1]).format(
                      'MMM DD YYYY'
                    )}
                  </td>
                </tr>
              </tbody>
            ))}
          </Table>
 

Я совсем растерялся.

РЕШЕНИЕ ИЗМЕНИТЬ:

вместо использования

 {moment(booking.dates[0]).format('MMM DD YYYY')
 

использовать

 {moment.utc(booking.dates[0]).format('MMM DD YYYY')