javascript - toDate is not a function error in React using Firebase

Question

I'm trying to fetch a date object stored in a Firebase Firestore collection I've linked as a DB to the app I'm working on. I get the strangest error which depends on the code below -

import React from 'react';
import { withStyles } from '@material-ui/core/styles';
import styles from './styles';
import List from '@material-ui/core/List';
import { Divider, Button } from '@material-ui/core';
import SidebarItem from '../sidebar-item/sidebarItem';

import DatePicker from 'react-datepicker';
import "react-datepicker/dist/react-datepicker.css";

class Sidebar extends React.Component {
    constructor() {
        super();
        this.state = {
            addingNote: false,
            title: null,
            currDate: new Date()
        }
        this.handleChange = this.handleChange.bind(this);
    }

    newBtnClick = () => {
        this.setState({ addingNote: !this.state.addingNote, title: null, currDate: new Date() })
    }

    updateTitle = (txt) => {
        this.setState({ title: txt })
    }

    handleChange(date) {
        this.setState({ currDate: date })
    }

    newNote = () => {
        this.props.newNote(this.state.title, this.state.currDate);
        this.setState({ title: null, addingNote: false });
    }

    selectNote = (n, i) => this.props.selectNote(n, i);
    deleteNote = (note) => this.props.deleteNote(note);

    render() {
        const { notes, classes, selectedNoteIndex } = this.props;

        console.log(this.state.currDate);

        if(notes) {
            return(
                <div className={classes.sidebarContainer}>
                    <Button 
                        onClick={this.newBtnClick}
                        className={classes.newNoteBtn}
                    >
                        {this.state.addingNote ? 'Cancel' : 'New Note'}
                    </Button>
                    {
                        this.state.addingNote ?
                            <div>
                                <input
                                    type="text"
                                    className={classes.newNoteInput}
                                    placeholder='Enter Note Title'
                                    onKeyUp={(e) => this.updateTitle(e.target.value)}
                                ></input>
                                <DatePicker
                                    selected={ this.state.currDate }
                                    onChange={ this.handleChange }
                                    name="currDate"
                                    className={classes.newNoteInput}
                                    dateFormat="MM/dd/yyyy"
                                />
                                <Button
                                    className={classes.newNoteSubmitBtn}
                                    onClick={this.newNote}
                                >
                                    Create Note
                                </Button>
                            </div>
                        :
                            null
                    }
                    <List>
                        {
                            notes.map((note, index) => {
                                return(
                                    <div>
                                        <SidebarItem
                                            note={note}
                                            index={index}
                                            selectedNoteIndex={selectedNoteIndex}
                                            selectNote={this.selectNote}
                                            deleteNote={this.deleteNote}
                                        >
                                        </SidebarItem>
                                        <Divider></Divider>
                                    </div>
                                )
                            })
                        }
                    </List>
                </div>
            );
        } else {
            return(<div></div>);
        }
    }
}

export default withStyles(styles)(Sidebar);

The above is the main sidebar component which uses the sidebar item component to map the sidebar of the app. The Sidebar item component is as below-

import React from 'react';
import { withStyles } from '@material-ui/core/styles';
import styles from './styles';
import ListItem from '@material-ui/core/ListItem';
import ListItemText from '@material-ui/core/ListItemText';
import DeleteIcon from '@material-ui/icons/Delete';


class SidebarItem extends React.Component {
    selectNote = (n, i) => this.props.selectNote(n, i);

    deleteNote = (note) => {
        if(window.confirm(`Are you sure you want to delete : ${note.title}`)) {
            this.props.deleteNote(note);
        }
    }
    
    render() {
        const { note, index, classes, selectedNoteIndex } = this.props;

        return(
            <div key={index}>
                <ListItem
                    className={classes.listItem}
                    selected={selectedNoteIndex === index}
                    align-items='flex-start'
                >
                    <div
                        className={classes.textSection}
                        onClick={() => this.selectNote(note, index)}
                    >
                        <ListItemText
                            primary={note.title}
                            secondary={new Date(note.date.toDate()).toDateString()}
                        >
                        </ListItemText>
                    </div>
                    <DeleteIcon 
                        className={classes.deleteIcon}
                        onClick={() => this.deleteNote(note)}    
                    ></DeleteIcon>
                </ListItem>
            </div>
        )
    }
}

export default withStyles(styles)(SidebarItem);

The error is such - Whenever I try to create a new Note (active only if addingNote in sidebar is true) and finally press the create note button I've created, it throws an error saying toDate is not a function. But as I refresh the page. That entry is already created in the sidebar and the date is visible as a secondary. Which probably means the selctive rendering of the button might be throwing some error. Any help would be appreciate to fix this anamoly.

Answer 1

等待大神答复