дата события не отформатирована правильно при использовании firestore - PullRequest
Новая
       13

дата события не отформатирована правильно при использовании firestore

0 голосов
/ 01 ноября 2018

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

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      events: []
    };
    
  componentDidMount() {
    const newEvents = [];

    firebase
      .firestore()
      .collection("events")
      .get()
      .then(querySnapshot => {
        querySnapshot.forEach(doc => {
          newEvents.push(doc.data());
          this.setState({
            events: newEvents
          });
        });
      });
  }

и мой календарь: 

          <DnDCalendar
            localizer={localizer}
            defaultDate={new Date()}
            defaultView="week"
            events={this.state.events}
            style={{ height: "100vh" }}
          />

Календарь отображается очень хорошо, мне просто нужно, чтобы события отображались в календаре. Новый, чтобы реагировать, поэтому любая помощь приветствуется!

1 Ответ

0 голосов
/ 04 ноября 2018

Firestore Firebase хранит дату в формате Timestamp. поэтому, когда вы извлекаете события, вы начинаете и заканчиваете меткой времени. Но React большой календарь ожидает дату типа объекта даты, а не отметку времени. Таким образом, вы можете использовать метод метки времени toDate () для преобразования метки времени в дату.

Таким образом, код должен выглядеть следующим образом 

   componentDidMount() {
const newEvents = [];

firebase
  .firestore()
  .collection("events")
  .get()
  .then(querySnapshot => {
    querySnapshot.forEach(doc => {
      let event = doc.data();
      event.start = event.start.toDate();
      event.end= event.end.toDate();
      newEvents.push(event);
      this.setState({
        events: newEvents
      });
    });
  });

}

...