时间戳

首页 > 解决方案 > 对象作为 React 子对象无效（找到：带有键 {seconds, nanoseconds} 的对象）

javascript - 对象作为 React 子对象无效（找到：带有键 {seconds, nanoseconds} 的对象）

问题描述

我正在使用 Firebase 创建一个 React 日历应用程序，并且在为每个安排的事件打印日期时遇到了一些问题。

这是我的应用程序代码：

import React, { useState, useEffect } from 'react'
import firebase from 'firebase';
import { Button, FormControl, InputLabel, Input } from '@material-ui/core';
import DatePicker from 'react-datepicker';
import 'react-datepicker/dist/react-datepicker.css';

import db from './firebase'
import TodoList from './TodoList'



const HomePage = () => {

  const [todos, setTodos] = useState([]);
  const [input, setInput] = useState('');
  const [startDate, setStartDate] = useState(new Date())

  useEffect(() => {
    db.collection('todos').orderBy('timestamp', 'desc').onSnapshot(snapshot => {
      setTodos(snapshot.docs.map(doc => ({ id: doc.id, todo: doc.data().todo, date: doc.data().date })))
    })
  }, [])

  const addTodo = (event) => {
    event.preventDefault()

    db.collection('todos').add({
      todo: input,
      date: startDate,
      timestamp: firebase.firestore.FieldValue.serverTimestamp(),
    })

    setTodos([...todos, input, startDate ])
    setInput('')
  }


  return (
    <div className='text-center' >
      <h1>TO DO LIST FIREBASE</h1>
      <form onSubmit={addTodo}>
        <FormControl>
          <InputLabel>Write Your Todo</InputLabel>
          <Input value={input} onChange={event => setInput(event.target.value)} />
          <DatePicker selected={startDate} 
                      onChange={date => setStartDate(date)} 
                      dateFormat="dd/MM/yyyy h:mm aa"
                      showTimeSelect 
          />
          <Button disabled={!input} variant='contained' color='primary' type='submit' >
            Add Todo
          </Button>
        </FormControl>
      </form>

      <TodoList todos={todos} />
    </div >
  )
}



export default HomePage;

这是我的 Todo List 组件代码：

import React from 'react';
import db from './firebase';
import DeleteIcon from '@material-ui/icons/Delete';
import { List } from '@material-ui/core'


export default function TodoList( { todos }) {
    return (
        <>
            <List>
                {todos.map((todo, index) => (
                    <li key={index}>
                        {todo.todo}
                        <br />
                        {todo.date}
                        <DeleteIcon onClick={event => db.collection('todos').doc(todo.id).delete()} />
                    </li>

                ))}
            </List>
        </>
    )
}

问题是......我只能在几秒钟内将“日期”作为字符串传递......当我尝试在我的 Todo List 组件上转换它以将其作为人类可读的日期返回时，它给我带来了这个错误。

编辑：这是我所拥有的打印： TodoList with seconds

而且我想将其更改为正常的日期格式而不会出现此错误。

标签： javascriptreactjsfirebase

解决方案

这是因为你todo.date的类型是对象。

例如

const date = new Date(timeStamp)

// in jsx
{date }
// u will got error : Error: Objects are not valid as a React child

// convert it to primitive type
{data.toLocaleString()}

或者你可以试试这种方式

<DatePicker selected={startDate} 
                      onChange={date => setStartDate(new Date(date).toLocaleString())} 
                      dateFormat="dd/MM/yyyy h:mm aa"
                      showTimeSelect 
          />

推荐阅读