Question

在我的项目中，我要向Cloud Firestore发送开始日期，结束日期和标题，并在我的react应用程序中正确接收它。如何将事件从Firestore解析到react-big-calendar？

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

日历呈现得很好，我只需要事件即可显示在日历上。新来的反应，感谢您的帮助！

Answer 1

Firebase的Firestore以时间戳格式存储日期。因此，当您获取事件时，您将开始并在时间戳记中结束。但是React大日历期望类型为date对象的日期，而不是时间戳。因此，您可以使用时间戳的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
      });
    });
  });

}

使用Firestore时，事件日期格式不正确

1 个答案: