Оказание метки времени пожарного магазина в реакции

Question

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

В декабре 2019 года решение, которое я принял на этом посте , сработало. Это больше не работает. Я снова застрял.

У меня есть база данных. js Помощник для записи дат:

class Firebase {
  constructor() {
    app.initializeApp(config)
    this.firestore = app.firestore();
    this.auth = app.auth();
    this.serverTimestamp = app.firestore.FieldValue.serverTimestamp;


  }

Я использую этот помощник в формах для записи даты создания записи вот так:

  await Firebase.firestore.collection("blog").doc().set({ 
    title: values.title,    
    createdAt: Firebase.serverTimestamp()

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

Когда я наведите курсор поверх даты отображается «отметка времени». Я могу упорядочить данные, возвращенные из магазина, со ссылкой на дату создания. Поэтому любопытно, что метка времени может использоваться для сортировки документов, но не может использоваться для печати даты на экране.

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

Когда я пытаюсь:

   {currentPost.createdAt.toDate().toISOString()}

TypeError: Невозможно прочитать свойство 'toDate' из неопределенного

Когда я пытаюсь:

   {currentPost.createdAt.toDate()}

TypeError: Невозможно прочитать свойство 'toDate 'of undefined

Когда я пытаюсь:

   {new Date(currentPost.createdAt.seconds * 1000).toLocaleDateString("en-US")}

TypeError: Невозможно прочитать свойство' seconds 'из undefined

Когда я пытаюсь (я знаю, это победило') работает, но просто пытается найти идеи, которые могут помочь решить эту проблему):

   {currentPost.createdAt}

Ошибка: объекты недопустимы как дочерний элемент React (найдено: объект с ключами {секунды, наносекунды}) , Если вы намеревались визуализировать коллекцию дочерних элементов, используйте вместо этого массив.

Я видел записей , в которых говорится, что дата не определена, поскольку вызов firebase не вернулся значение пока нет, но когда я console.log целиком currentPost, я получаю значение для созданного At, которое равно:

createAt: t секунд: 1586495818 наносекунд: 888000000

Часть этого, которая выглядит подозрительно, - "t". Представляет ли это что-то, с чем я должен что-то делать, чтобы получить доступ к метке времени? Кто-нибудь знает, как исследовать, что представляет «т»?

Я видел этот пост и этот пост , и обратите внимание, что каждый из ответов на него предлагает что расширение .toDate () должно помочь преобразовать временную метку пожарного хранилища во что-то, что может быть выведено. Ни одно из этих решений не работает здесь.

Кто-нибудь придумал текущее решение, которое позволяет как сохранять, так и выводить дату из хранилища?

Answer 1

Странно - я не понимаю, почему или как это работает, но это так.

Я изменил useEffect на asyn c - следующим образом.

function ReadBlogPost () {
    const [loading, setLoading] = useState(true);
    const [currentPost, setCurrentPost] = useState({});
    let { slug } = useParams();


    useEffect(() => {

        const fetchData = async() => {

            try {

                const response = await Firebase.firestore
                    .collection("blog")
                    .doc(slug)
                    .get();

                console.log('response', response);

                let data = { title: 'not found' };

                if (response.exists) {
                    data = response.data();
                }

                setCurrentPost(data);
                setLoading(false);

            } catch(err) {
                console.error(err);
            }

        };

        fetchData();

    }, []);

Тогда в рендере я могу использовать:

 {!loading && new Date(currentPost.createdAt.seconds * 1000).toLocaleDateString("en-US")}

Пальцы скрещивали эту работу более нескольких месяцев.