Создание объекта даты в будущем в react

Я пытаюсь создать приложение для катания на лыжах в React, где я хочу установить некоторые даты, когда происходит событие, связанное с катанием на лыжах. Всякий раз, когда я использую объект даты и передаю дату, которая находится в будущем, в конструктор, он просто отображает

Nan/Nan/Nan

Вот мой код:

<SkiDayList
  days={[
    {
      resorts: "Squaw Valley",
      date: new Date("20/8/2018"),
      powder: true,
      backcountry: false
    },
    {
      resorts: "Val Thorens",
      date: new Date("5/10/2018"),
      powder: true,
      backcountry: true
    },
    {
      resorts: "Val Desire",
      date: new Date("5/10/2018"),
      powder: false,
      backcountry: true
    },
    {
      resorts: "Squaw Valley",
      date: new Date("1/2/2018"),
      powder: true,
      backcountry: false
    }
  ]}
/>

Я знаю, что могу просто умножить даты или добавить значения, но лучше ли делать это внутри конструктора, или лучше создавать значения вне компонента, а затем передавать их, я новичок в реакции, некоторые я Я не уверен, что лучше всего.

Обновлено:

вот мой компонент SkiDayRow.js

import React, { Component } from "react";
import { FaBeer } from "react-icons/fa";
import React, { Component } from "react";
import { FaBeer } from "react-icons/fa";

export const SkiDayRow = ({ resort, date, powder, backcountry }) => (
  <tr>
    <td>
      {date.getMonth() + 1}/{date.getDate()}/{date.getFullYear()}
    </td>
    <td>{resort}</td>
    <td>{powder ? <FaBeer /> : null}</td>
    <td>{backcountry ? <FaBeer /> : null}</td>
  </tr>
);

Трудно сказать, почему вы получаете Nan/Nan/Nan, не видя, как реализован ваш компонент SkiDayList.

Tholle 10.08.2018 15:46

Прошу прощения, я внесу правку

Ating 10.08.2018 15:54
SkiDayList, к сожалению, тоже не содержит достаточно информации. Вы должны показать нам код, в котором вы используете объекты даты. Может, именно SkiDayRow?
Tholle 10.08.2018 15:59

Да, это был неправильный компонент, теперь он редактируется

Ating 10.08.2018 16:00

Я обнаружил, что он отображает MaN всякий раз, когда у меня свидание, старше 12 лет.

Ating 10.08.2018 16:01

Что вы имеете в виду под «старше 12»? x в 5/x/2018 иногда превышает 12 в вашем коде? Это была бы недопустимая дата, поэтому, вероятно, вы получаете сообщение об ошибке.

Tholle 10.08.2018 16:04

Да, я понимаю, что знаю ... Спасибо, что прояснили это для меня, я совсем забыл о том факте, что метод getMonth работает с массивом с нулевым отсчетом

Ating 10.08.2018 16:07
1
7
1 950
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Этот объект был бы настолько простым, что я не уверен, что он должен быть компонентом React. Вы можете использовать браузер с Intl.DateTimeFormat для форматирования даты.

Если вам все еще нужен компонент, вы можете сделать что-то вроде этого.

Компонент даты:

export class DateComponent extends Component {
  render() {
    const {day, month, year} = this.props;
    return (
      <div>{month}/{day}/{year}</div>
    ):
  }
}

А в используй это просто передайте реквизиты компоненту:

(...)
render() {
  return (
    <DateComponent day={10} month={08} year={2018} />
  );
}

Редактировать: Добавлен сниппет с DateTimeFormat

const today = Date.now();

console.log(new Intl.DateTimeFormat('en-US', {year: 'numeric', month: '2-digit',day: '2-digit'}).format(today));

Я понимаю вашу точку зрения, но для того, чтобы сохранить больше структуры в моем проекте, я думаю, было бы лучше передать атрибут даты в объект?

Ating 10.08.2018 15:56

Если вы хотите добавить больше функций к компоненту даты, например больше типов форматов, поддержку других часовых поясов, возможно, шрифты, цвета или другие способы отображения даты и т. д., Имеет смысл создать компонент. Если это просто дата в виде строки, я не думаю, что она вам нужна.

Rodius 10.08.2018 16:24

Другие вопросы по теме