React - 显示 Firestore 时间戳

Question

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

我有一个带有名为 createdAt 的字段的 firestore 文档。

我正在尝试将其包含在 output 列表中（在此处提取相关位，这样您就不必通读整个字段列表）。

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：无法读取未定义的属性“toDate”

我看过这篇文章， 这篇文章和这篇文章， 这篇文章和其他类似的文章，这表明 toDate() 应该可以工作。 但是 - 这个扩展对我来说抛出了一个错误 - 包括当我尝试 toString 扩展时。

我知道它知道 Firestore 中有一些东西，因为当我尝试 user.createdAt 时，我收到一条错误消息，说它找到了一个 object，里面有几秒钟。

以下面 Waelmas 的示例为例，我尝试将字段的 output 记录为：

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

}

我还尝试将此添加到我的 map 语句中，但收到一条错误消息，提示 user.get 不是 function。

{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);

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

{项目.电子邮件}

错误消息如下：

错误：对象作为 React 子对象无效（发现：时间戳（秒=1576363035，纳秒=52000000））。 如果您打算渲染一组子项，请改用数组。 在项目中（在 UserIndex.jsx:74）

当我尝试使用这些尝试中的每一个时：

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

我收到一条错误消息：

TypeError：无法读取未定义的属性“toDate”

基于在其他字段中读回记录在同一文档中的条目的能力，我希望这些条目中的任何一个都能产生 output - 即使它没有按照我想要的方式格式化。 那不会发生。

下一次尝试

以 Waelmas 为例，我尝试按照说明进行操作，但第一步是我们没有得到相同的响应。 在 Walemas 基于 .toDate() 扩展名获得 output 的地方，我收到一条错误消息，指出 toDate() 不是 function。

与 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()
        })

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

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

当我尝试 output 日期的值时，第一个生成的错误是：

对象作为 React 子级无效（发现时间：2019 年 12 月 15 日星期日 21:33:32 GMT+1100（澳大利亚东部夏令时间））。 如果您打算渲染一组孩子，请改用数组

第二个产生错误说：

TypeError：无法读取未定义的属性“toDate”

我被困在下一步要尝试什么的想法上。

我看到这篇文章表明以下内容可能会做一些有用的事情：

                {item.createdAt1.Date.valueOf()}

它没有。 它呈现一个错误，上面写着：

TypeError：无法读取未定义的属性“日期”

这篇文章似乎和我遇到了同样的麻烦，但 go 并没有说明他们如何设法显示他们存储的日期值。

这篇文章似乎卡在数组错误消息上，但似乎已经弄清楚如何使用 createdAt.toDate() 显示日期

Answer 1

经过一些讨论，我们发现 OPs 用户对象中的时间戳可以这样呈现：

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 项目中重新创建了您的示例，并收到了与预期相同的错误。

错误：对象作为 React 子对象无效

我能够使用以下方法正确呈现它，这也适用于您：

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

其中，对于我的示例时间戳，呈现为：

12/30/2019

---

确保您使用的是保存到 Firestore 的时间戳：

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

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

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

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

---

我尝试过的其他事情：

user.createdAt.toDate()抛出toDate() is not a function 。

user.createdAt抛出Error: Objects are not valid as a React child

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

Answer 2

当您从 Firestore 获取时间戳时，它们属于以下类型：

要将其转换为普通时间戳，您可以使用 .toDate() 函数。

例如，对于像下面这样的文档：

我们可以使用类似的东西：

db.collection('[COLLECTION]').doc('[DOCUMENT]').get().then(function(doc) {
  console.log(doc.data().[FIELD].toDate());
});

输出将类似于：

2019-12-16T16:27:33.031Z

现在要进一步处理该时间戳，您可以将其转换为字符串并使用正则表达式根据您的需要对其进行修改。

例如：（我在这里使用 Node.js）

db.collection('[COLLECTION]').doc('[DOCUMENT]').get().then(function(doc) {
  var stringified = doc.data().[FIELD].toDate().toISOString();
  //console.log(stringified);
  var split1 = stringified.split('T');
  var date = split1[0].replace(/\-/g, ' ');
  console.log(date);
  var time = split1[1].split('.');
  console.log(time[0]);
});

会给你一个这样的输出：

Answer 3

因此，firestore 将日期存储为具有秒和纳秒的对象。 如果您想要创建用户的时间，那么您将引用user.createdAt.nanoseconds 。 这将返回一个 unix 时间戳。

您希望如何在您的应用中显示日期？ 如果你想获得一个日期对象，那么你可以将时间戳传递给一个日期构造函数，比如new Date(user.createdAt.nanoseconds) 。 我个人喜欢使用date-fns库来处理时间。

Answer 4

如何将日期发送到 Firestore：

import firebase from 'firebase/app';

// ..........
// someObject is the object you're saving to your Firestore.

someObject.createdAt: firebase.firestore.Timestamp.fromDate(new Date())

如何回读：

function mapMonth(monthIndex) {
  const months = {
    0: 'jan',
    1: 'feb',
    2: 'mar',
    3: 'apr',
    4: 'may',
    5: 'jun',
    6: 'jul',
    7: 'aug',
    8: 'sep',
    9: 'oct',
    10: 'nov',
    11: 'dec'
  };
  return months[monthIndex];
}

// ..........
// Here you already read the object from Firestore and send its properties as props to this component.

return(
    <LS.PostDate_DIV>
      Published on {mapMonth(props.createdAt.toDate().getMonth()) + ' '}
      of {props.createdAt.toDate().getFullYear()}
    </LS.PostDate_DIV>
  );
}

基本上，当您执行createdAt.toDate()您会得到一个 JS Date 对象。

我一直都是这样用的！

来自： https : //cloud.google.com/firestore/docs/manage-data/add-data

这将根据用户的系统日期创建数据。 如果您需要确保所有内容都按时间顺序存储（没有任何由用户系统设置的错误系统日期的错误）在您的数据库中，您应该使用服务器时间戳。 日期将使用您的 Firestore 数据库内部日期系统设置。

Answer 5

使用具有createdAt属性集的用户的文档 ID，尝试以下操作：

const docRef = db.collection("users").doc("[docID]");

docRef.get().then(function(docRef) {
  if (docRef.exists) {
     console.log("user created at:", docRef.data().createdAt.toDate());
  }
})

在访问文档的属性之前调用.data()方法并不重要

请注意，如果您访问docRef.data().createdAt.toDate()对于其用户的createdAt属性为没有设置，你会得到TypeError: Cannot read property 'toDate' of undefined

因此，如果您的集合中有任何用户没有定义createdAt属性。 您应该实现一个逻辑，以在获取之前检查用户是否具有createdAt属性。 你可以这样做：

//This code gets all the users and logs it's creation date in the console
docRef.get().then(function(docRef) {
  if (docRef.exists && docRef.data().createdAt) {
      console.log("User created at:", docRef.data().createdAt.toDate());
  }
})

Answer 6

过去我遇到过嵌套对象属性在item.someProp被视为对象的列表中无法正确呈现的问题，但item.someProp.someSubProp无法使用someSubProp中item.someProp的值解决。

因此，为了绕过这个问题，为什么不在创建用户对象时将 Timestamp 评估为普通日期对象（或所需的显示格式）？

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

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

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

Answer 7

我解决了这个问题，首先将时间戳值转换为字符串，创建一个名为 date 的单独 state 并将其传递给我的反应组件

const [date, setDate] = useState("")

setDate(item.createdAt.toDate().toString())

 <ListItem> {date} </ListItem>