javascript - React - 显示 firestore 时间戳

Question

我正在尝试弄清楚如何在 React 应用程序中显示 Firestore 时间戳。

我有一个 firestore 文档，其中包含一个名为createdAt 的字段。

我试图将其包含在输出列表中(在此处提取相关位，以便您不必阅读整个字段列表)。

componentDidMount() {
    this.setState({ loading: true });

    this.unsubscribe = this.props.firebase
      .users()
      .onSnapshot(snapshot => {
        let users = [];

        snapshot.forEach(doc =>
          users.push({ ...doc.data(), uid: doc.id }),
        );

        this.setState({
          users,
          loading: false,
        });
      });
  }

  componentWillUnmount() {
    this.unsubscribe();
  }

  render() {
    const { users, loading } = this.state;

    return (
        <div>
    {loading && <div>Loading ...</div>}

            {users.map(user => (

                <Paragraph key={user.uid}>  

       <key={user.uid}>  
       {user.email}
       {user.name}
       {user.createdAt.toDate()}
       {user.createdAt.toDate}
       {user.createdAt.toDate()).toDateString()}

唯一不会呈现的属性是日期。

上述每次尝试都会生成一个错误，内容如下:

TypeError: Cannot read property 'toDate' of undefined

我见过this post ，和this post和this post ，和this post和其他类似的人，这表明 toDate() 应该可以工作。但是 - 这个扩展给我带来了一个错误 - 包括当我尝试 toString 扩展时。

我知道它知道 firestore 中有东西，因为当我尝试 user.createdAt 时，我收到一条错误消息，说它找到了一个包含秒数的对象。

以下面 Waelmas 的示例为例，我尝试将字段的输出记录为:

this.db.collection('users').doc('HnH5TeCU1lUjeTqAYJ34ycjt78w22').get().then(function(doc) {
  console.log(doc.data().createdAt.toDate());

}

我还尝试将其添加到我的 map 语句中，但收到错误消息，指出 user.get 不是函数。

{user.get().then(function(doc) {
                    console.log(doc.data().createdAt.toDate());}
                  )}

它生成与上面相同的错误消息。

下一次尝试

在试图找到一种在 Firestore 中记录日期并允许我读回的方法时，出现了一件奇怪的事情，那就是当我以一种形式更改提交处理程序以使用此公式时:

handleCreate = (event) => {
    const { form } = this.formRef.props;
    form.validateFields((err, values) => {
      if (err) {
        return;
      };
    const payload = {
    name: values.name,
    // createdAt: this.fieldValue.Timestamp()
    // createdAt: this.props.firebase.fieldValue.serverTimestamp()

    }
    console.log("formvalues", payload);
    // console.log(_firebase.fieldValue.serverTimestamp());


    this.props.firebase
    .doCreateUserWithEmailAndPassword(values.email, values.password)
    .then(authUser => {
    return this.props.firebase.user(authUser.user.uid).set(
        {
          name: values.name,
          email: values.email,
          createdAt: new Date()
          // .toISOString()
          // createdAt: this.props.firebase.fieldValue.serverTimestamp()

        },
        { merge: true },
    );
    // console.log(this.props.firebase.fieldValue.serverTimestamp())
    })
    .then(() => {
      return this.props.firebase.doSendEmailVerification();
      })
    // .then(() => {message.success("Success") })
    .then(() => {
      this.setState({ ...initialValues });
      this.props.history.push(ROUTES.DASHBOARD);

    })


  });
  event.preventDefault();
    };

这可以在数据库中记录日期。

firestore 条目的形式如下所示:

我正在尝试在此组件中显示日期:

class UserList extends Component {
  constructor(props) {
    super(props);

    this.state = {
      loading: false,
      users: [],
    };
  }

  componentDidMount() {
    this.setState({ loading: true });

    this.unsubscribe = this.props.firebase
      .users()
      .onSnapshot(snapshot => {
        let users = [];

        snapshot.forEach(doc =>
          users.push({ ...doc.data(), uid: doc.id }),
        );

        this.setState({
          users,
          loading: false,
        });
      });
  }

  componentWillUnmount() {
    this.unsubscribe();
  }

  render() {
    const { users, loading } = this.state;

    return (
      <div>
          {loading && <div>Loading ...</div>}

          <List
            itemLayout="horizontal"
            dataSource={users}

            renderItem={item => (
              <List.Item key={item.uid}>
                <List.Item.Meta
                  title={item.name}
                  description={item.organisation}
                />
                  {item.email}
                  {item.createdAt}
                  {item.createdAt.toDate()}
                  {item.createdAt.toDate().toISOString()}

              </List.Item>
            // )
          )}
          />

      </div>
    );
  }
}

export default withFirebase(UserList);

当我尝试读回它时 - 使用:

{项目.电子邮件}

错误消息如下:

Error: Objects are not valid as a React child (found: Timestamp(seconds=1576363035, nanoseconds=52000000)). If you meant to render a collection of children, use an array instead. in Item (at UserIndex.jsx:74)

当我尝试使用这些尝试时:

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

我收到一条错误消息:

TypeError: Cannot read property 'toDate' of undefined

基于读回其他字段中同一文档中记录的条目的能力，我期望其中任何一个都能够产生输出 - 即使它的格式不符合我想要的方式。但这不会发生。

下一次尝试

以 Waelmas 为例，我尝试按照说明进行操作，但我们在第一步中没有得到相同的响应。当 Walemas 根据 .toDate() 扩展名获取输出时，我收到一条错误消息，指出 toDate() 不是函数。

与 Firebase 文档一致，我尝试过:

    const docRef = this.props.firebase.db.collection("users").doc("HnH5TeCU1lUjeTqAYJ34ycjt78w22");

docRef.get().then(function(docRef) {
    if (doc.exists) {
        console.log("Document createdAt:", docRef.createdAt.toDate());

}})

这会产生一串语法错误，但我找不到解决方法。

下一次尝试

然后，我尝试制作一个新表单，看看是否可以在没有用户表单例份验证方面的情况下进行探索。

我有一个接受输入的表单:

this.props.firebase.db.collection("insights").add({
            title: title,
            text: text,
            // createdAt1: new Date(),
            createdAt: this.props.firebase.fieldValue.serverTimestamp()
        })

在前面的表单中，新的 Date() 尝试在数据库中记录日期，在此示例中，createdAt 和createdAt1 的两个字段都会生成相同的数据库条目:

<div>{item.createdAt.toDate()}</div>
                    <div>{item.createdAt.toDate()}</div>

当我尝试输出日期值时，第一个会生成一个错误，内容如下:

Objects are not valid as a React child (found: Sun Dec 15 2019 21:33:32 GMT+1100 (Australian Eastern Daylight Time)). If you meant to render a collection of children, use an array instead

第二个生成错误:

TypeError: Cannot read property 'toDate' of undefined

我一直在想下一步该尝试什么。

我看到了this post这表明以下内容可能会做一些有用的事情:

                {item.createdAt1.Date.valueOf()}

事实并非如此。它会呈现一个错误:

TypeError: Cannot read property 'Date' of undefined

这个post似乎和我遇到了同样的麻烦，但没有讨论他们如何设法显示他们存储的日期值。

这个post似乎陷入了数组错误消息，但似乎已经弄清楚如何使用createdAt.toDate()显示日期

Answer 1

经过一番讨论，我们发现OP用户对象中的时间戳可以这样渲染:

render() { 
const { users, loading } = this.state; 

return ( 
    <div> 
        {loading && <div>Loading ...</div>} 

        {users.map(user => ( 

            <Paragraph key={user.uid}> 

                <key={user.uid}> 
                    {user.email} 
                    {user.name} 
                    {new Date(user.createdAt.seconds * 1000).toLocaleDateString("en-US")}

<小时/>

我在虚拟 React 项目中重新创建了您的示例，并收到了与预期相同的错误。

Error: Objects are not valid as a React child

我能够使用以下方法使其正确呈现，这也应该适合您:

{new Date(user.createdAt._seconds * 1000).toLocaleDateString("en-US")}

对于我的示例时间戳，呈现为:

12/30/2019

<小时/>

确保您使用的时间戳已保存到 Firestore:

createdAt: this.props.firebase.Timestamp.fromDate(new Date())

注意:假设您的 firebase.firestore() 实例位于 this.props.firebase。在其他示例中，您使用 this.props.firebase，但这些方法看起来像是您自己创建的辅助方法。

获取此值时，它将是一个具有两个属性的对象 - _seconds 和 _nanoseconds。

请务必包含下划线。如果您使用createdAt.seconds，它将不起作用，它必须是createdAt._seconds。

<小时/>

我尝试过的其他事情:

user.createdAt.toDate() 抛出 toDate() 不是函数。

user.createdAt 抛出错误:对象作为 React 子项无效

new Date(user.createdAt._nanoseconds) 呈现错误的日期