javascript - toDate 不是使用 Firebase 的 React 中的函数错误

Question

我正在尝试获取存储在 Firebase Firestore 集合中的日期对象，我已将其作为数据库链接到我正在处理的应用程序。我收到最奇怪的错误，这取决于下面的代码 -

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

上面是主要的侧边栏组件，它使用侧边栏项目组件来映射应用程序的侧边栏。 Sidebar item组件如下-

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

错误是这样的 - 每当我尝试创建一个新的注释(仅当侧边栏中的 addingNote 为真时才有效)并最终按下我创建的创建注释按钮时，它会抛出一个错误，指出 toDate 不是一个函数。但是当我刷新页面时。该条目已在侧边栏中创建，日期作为次要日期可见。这可能意味着按钮的选择性呈现可能会引发一些错误。如果能解决这个问题，我们将不胜感激。

Answer 1

我遇到了同样的问题。解决方案对我来说很简单，您必须先检查时间戳是否存在。

{data.time === 未定义？ (

时间未定义 ) : ( {data.time.toDate().toLocaleTimeString("en-US")} )}

在那之后，你可以做任何你想做的事。 (第一次回答问题，如有错误请指出)