React-ファイヤーストアのタイムスタンプを表示します

反応アプリでファイアストアのタイムスタンプを表示する方法を理解しようとしています。

「createdAt」という名前のフィールドを持つFirestoreドキュメントがあります。

私はそれを出力のリストに含めようとしています（ここで関連するビットを抽出して、フィールドのリスト全体を読む必要がないようにします）。

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拡張機能を試すときも含めます。

私がuser.createdAtを試すと、秒のあるオブジェクトが見つかったというエラーが表示されるため、firestoreに何かがあることを知っています。

以下のWaelmasの例を取り上げて、フィールドの出力を次のようにログに記録しようとしました。

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

}

これもマップステートメントに追加してみましたが、user.getが関数ではないというエラーが表示されます。

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

上記と同じエラーメッセージが生成されます。

次の試み

Firestoreで日付を記録し、それを読み取れるようにする方法を見つけようとしたときに発生した奇妙なことの1つは、送信ハンドラを1つのフォームで変更してこの式を使用することです。

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

私がそれを読み返そうとすると-使用：

{item.email}

エラーメッセージは次のとおりです。

エラー：オブジェクトはReact子としては有効ではありません（見つかった：Timestamp（seconds = 1576363035、nanoseconds = 52000000）））。子のコレクションをレンダリングする場合は、代わりに配列を使用してください。アイテム（UserIndex.jsx：74）

これらの各試行を使用しようとすると：

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

私は言うエラーが出ます：

TypeError：未定義のプロパティ 'toDate'を読み取れません

他のフィールドで同じドキュメントに記録されたエントリを読み戻す機能に基づいて、私はこれらのいずれかが出力を生成するために機能することを期待しています-たとえそれが私が望む方法でフォーマットされていなくても。それは起こりません。

次の試み

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>

日付の値を出力しようとすると、最初のものが次のエラーを生成します。

React子としてオブジェクトは有効ではありません（検出：2019年12月15日21:33:32 GMT + 1100（オーストラリア東部夏時間）））子のコレクションをレンダリングする場合は、代わりに配列を使用してください

2番目は、次のエラーを生成します。

TypeError：未定義のプロパティ 'toDate'を読み取れません

私は次に何をしようかというアイデアに行き詰まっています。

私はこの投稿を見ました、それは以下が何か有用なことをするかもしれないことを示唆しています：

                {item.createdAt1.Date.valueOf()}

そうではありません。それは言うエラーをレンダリングします：

TypeError：未定義のプロパティ 'Date'を読み取れません

この post は私と同じ問題を抱えているようですが、格納されている日付値を表示する方法については触れていません。

この post は配列エラーメッセージで行き詰まっているようですが、createdAt.toDate（）を使用して日付を表示する方法を理解しているようです

javascriptreactjsfirebasegoogle-cloud-firestoreunix-timestamp

2019/12/10Mel

いくつかの議論の後、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")}
_

これは、私のサンプルタイムスタンプでは、次のようにレンダリングされます。

2019年12月30日

Firestoreに次のように保存されたタイムスタンプを使用していることを確認してください：

_createdAt: this.props.firebase.Timestamp.fromDate(new Date())
_

注：これは、firebase.firestore()のインスタンスが_this.props.firebase_にあると想定しています。他の例ではthis.props.firebaseを使用していますが、これらのメソッドは、自分で作成したヘルパーメソッドのように見えます。

この値がフェッチされると、2つのプロパティを持つオブジェクトになります-__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)は間違った日付を表示します

2019/12/30Michael Rodriguez

過去にネストされたオブジェクトプロパティがitem.somePropがオブジェクトと見なされるリストで適切にレンダリングされない問題に遭遇しましたが、item.someProp.someSubPropはitem.somePropのsomeSubPropの値で解決しません。

それでは、問題を回避するために、ユーザーオブジェクトを作成するときに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,
    });
  });

2019/12/27samthecodingman