React - แสดงการประทับเวลา firestore

ฉันกำลังพยายามหาวิธีแสดงการประทับเวลา 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: ไม่สามารถอ่านคุณสมบัติ 'toDate' ของ undefined

ฉันได้เห็นโพสต์นี้และโพสต์นี้และโพสต์นี้และโพสต์นี้และอื่น ๆ เช่นพวกเขาซึ่งขอแนะนำว่า todate () ควรจะทำงาน แต่ - ส่วนขยายนี้ส่งข้อผิดพลาดให้ฉัน - รวมถึงเมื่อฉันลองใช้ส่วนขยาย toString

ฉันรู้ว่ามันรู้ว่ามีบางสิ่งบางอย่างใน firestore เพราะเมื่อฉันลอง user.createdAt ฉันได้รับข้อผิดพลาดที่บอกว่ามันพบวัตถุที่มีวินาทีในนั้น

จากตัวอย่างจาก 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 ที่ทำให้ฉันสามารถอ่านมันกลับมาได้คือเมื่อฉันเปลี่ยน handler ส่งในรูปแบบเดียวเพื่อใช้สูตรนี้:

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}

ข้อความแสดงข้อผิดพลาดอ่าน:

ข้อผิดพลาด: วัตถุไม่ถูกต้องในฐานะลูกการตอบสนอง (พบ: การประทับเวลา (วินาที = 1576363035, นาโนวินาที = 52000000)) หากคุณตั้งใจจะสร้างคอลเลกชันของเด็ก ๆ ให้ใช้อาร์เรย์แทน ในรายการ (ที่ UserIndex.jsx: 74)

เมื่อฉันลองใช้แต่ละครั้ง:

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

ฉันได้รับข้อผิดพลาดที่แจ้งว่า:

TypeError: ไม่สามารถอ่านคุณสมบัติ 'toDate' ของ 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>

เมื่อฉันพยายามที่จะส่งออกค่าของวันที่หนึ่งแรกสร้างข้อผิดพลาดที่ระบุว่า:

วัตถุไม่ถูกต้องในฐานะเด็กโต้ตอบ (ค้นพบ: อาทิตย์ 15 ธันวาคม 2019 21:33:32 GMT + 1100 (เวลาตามฤดูกาลของออสเตรเลียตะวันออก)) หากคุณต้องการสร้างกลุ่มเด็ก ๆ ให้ใช้อาร์เรย์แทน

ที่สองสร้างข้อผิดพลาดว่า:

TypeError: ไม่สามารถอ่านคุณสมบัติ 'toDate' ของ undefined

ฉันติดความคิดในสิ่งที่จะลองต่อไป

ฉันเห็นโพสต์นี้ซึ่งแนะนำว่าสิ่งต่อไปนี้อาจเป็นประโยชน์:

                {item.createdAt1.Date.valueOf()}

มันไม่ได้ มันทำให้เกิดข้อผิดพลาดที่ระบุว่า:

TypeError: ไม่สามารถอ่านคุณสมบัติ 'วันที่' ของที่ไม่ได้กำหนด

โพสต์นี้ดูเหมือนจะมีปัญหาเช่นเดียวกับฉัน แต่ไม่ได้ไปว่าพวกเขาจัดการเพื่อแสดงค่าวันที่พวกเขาเก็บไว้

โพสต์นี้ดูเหมือนจะติดอยู่ที่ข้อความแจ้งข้อผิดพลาดของอาเรย์ แต่ดูเหมือนจะหาวิธีแสดงวันที่โดยใช้ createdAt.toDate ()

หลังจากการสนทนาเราพบว่าการประทับเวลาในวัตถุผู้ใช้ 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 Dummy และได้รับข้อผิดพลาดเดียวกับที่คาดไว้

ข้อผิดพลาด: วัตถุไม่ถูกต้องในฐานะลูกตอบโต้

ฉันสามารถทำให้สิ่งนี้แสดงผลได้อย่างถูกต้องด้วยวิธีการต่อไปนี้ซึ่งควรใช้กับคุณ:

{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 แต่วิธีการเหล่านั้นมีลักษณะเหมือนวิธีการช่วยเหลือที่คุณสร้างขึ้นเอง

เมื่อค่านี้เป็นความจริงก็จะเป็นวัตถุที่มีคุณสมบัติที่สอง - การและ_seconds_nanoseconds

อย่าลืมใส่เครื่องหมายขีดล่าง ถ้าคุณใช้มันจะไม่ทำงานก็จะต้องcreatedAt.secondscreatedAt._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) วาทกรรมวันที่ผิด

เมื่อคุณได้รับการประทับเวลาจาก Firestore พวกเขาเป็นประเภทต่อไปนี้:

หากต้องการแปลงเป็นเวลาประทับปกติคุณสามารถใช้ฟังก์ชัน. toDate ()

ตัวอย่างเช่นสำหรับเอกสารเช่นต่อไปนี้:

เราสามารถใช้สิ่งที่ชอบ:

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

และผลลัพธ์จะเป็นเช่น:

2019-12-16T16:27:33.031Z

ตอนนี้เพื่อดำเนินการประทับเวลาต่อไปคุณสามารถแปลงเป็นสตริงและใช้ regex เพื่อแก้ไขตามความต้องการของคุณ

ตัวอย่างเช่น: (ฉันใช้ 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]);
});

จะให้ผลลัพธ์เช่นนี้:

ดังนั้น firestore เก็บวันที่เป็นวัตถุที่มีวินาทีและนาโนวินาที user.createdAt.nanosecondsหากคุณต้องการเวลาที่ผู้ใช้ถูกสร้างขึ้นแล้วคุณจะอ้างอิง ส่งคืนการประทับเวลา unix

คุณต้องการแสดงวันที่ลงในแอปของคุณอย่างไร? new Date(user.createdAt.nanoseconds)หากคุณต้องการที่จะได้รับวัตถุวันแล้วคุณสามารถผ่านการประทับเวลาเป็นคอนสตรัควันเช่นดังนั้น ส่วนตัวฉันสนุกกับการใช้ห้องสมุดdate-fnsในการจัดการเวลา

วิธีส่งวันที่ไปยัง 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 DB ของคุณ

ด้วย ID เอกสารของผู้ใช้ที่มีการcreatedAtตั้งค่าคุณสมบัติลองต่อไปนี้:

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

ผมเคยพบปัญหาในอดีตกับคุณสมบัติของวัตถุที่ซ้อนกันแสดงผลไม่ถูกต้องในรายการที่item.somePropถือว่าเป็นวัตถุ แต่item.someProp.someSubPropจะไม่แก้ปัญหาที่มีค่าของในsomeSubPropitem.someProp

ดังนั้นเพื่อหลีกเลี่ยงปัญหาทำไมไม่ประเมิน Timestamp เป็นวัตถุ Date ธรรมดา (หรือรูปแบบการแสดงผลที่ต้องการ) เมื่อสร้างวัตถุผู้ใช้?

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