Question

我正在尝试使用以下组件来构建React应用：

Scream.js

import React, { Component } from 'react';
import withStyles from '@material-ui/core/styles/withStyles';
import Typography from '@material-ui/core/Typography';

//Mui Stuff
import Card from '@material-ui/core/Card';
import CardContent from '@material-ui/core/CardContent';
import CardMedia from '@material-ui/core/CardMedia';


const styles ={
    card:{
        display: 'flex'
    }
}

class Scream extends Component {
    render() {
        const { classes, scream : { body, createdAt, userImage, userHandle, screamId, likeCount, commentCount }} = this.props
        return (
            <Card>
                <CardMedia 
                image={userImage}
                title="Profile Image"/>
                <CardContent>
                    <Typography variant="h5">{userHandle}</Typography>
                    <Typography variant="body2" color="textSecondary">{createdAt}</Typography>
                    <Typography variant="body1">{body}</Typography>
                </CardContent>
            </Card> 
        )
    }
}

export default withStyles(styles)(Scream);

但是我遇到以下错误：

Objects are not valid as a React child (found: object with keys {_seconds, _nanoseconds}). If you meant to render a collection of children, use an array instead.
    in p (created by ForwardRef(Typography))
    in ForwardRef(Typography) (created by WithStyles(ForwardRef(Typography)))
    in WithStyles(ForwardRef(Typography)) (at Scream.js:27)
    in div (created by ForwardRef(CardContent))
    in ForwardRef(CardContent) (created by WithStyles(ForwardRef(CardContent)))
    in WithStyles(ForwardRef(CardContent)) (at Scream.js:25)
    in div (created by ForwardRef(Paper))
    in ForwardRef(Paper) (created by WithStyles(ForwardRef(Paper)))
    in WithStyles(ForwardRef(Paper)) (created by ForwardRef(Card))
    in ForwardRef(Card) (created by WithStyles(ForwardRef(Card)))
    in WithStyles(ForwardRef(Card)) (at Scream.js:21)
    in Scream (created by WithStyles(Scream))
    in WithStyles(Scream) (at home.js:25)
    in div (created by ForwardRef(Grid))
    in ForwardRef(Grid) (created by WithStyles(ForwardRef(Grid)))
    in WithStyles(ForwardRef(Grid)) (at home.js:29)
    in div (created by ForwardRef(Grid))
    in ForwardRef(Grid) (created by WithStyles(ForwardRef(Grid)))
    in WithStyles(ForwardRef(Grid)) (at home.js:28)
    in home (created by Context.Consumer)
    in Route (at App.js:42)
    in Switch (at App.js:41)
    in div (at App.js:39)
    in Router (created by BrowserRouter)
    in BrowserRouter (at App.js:37)
    in ThemeProvider (at App.js:36)
    in div (at App.js:35)
    in App (at src/index.js:6)

我当前的材料ui / core版本是4.3.0，请问这是库中的错误吗，因为我花了很多时间尝试调试代码。谁能指导我介绍一些材料，以便使我摆脱这个问题？

Answer 1

您的错误是

对象作为React子对象无效（找到：带有键{_seconds，_nanoseconds}的对象）

这意味着您正在尝试渲染对象。

我认为您的错误是由于此行引起的，

<Typography variant="body2" color="textSecondary">{createdAt}</Typography>

您必须尝试一下，

<Typography variant="body2" color="textSecondary">{createdAt._seconds} {createdAt._nanoseconds}</Typography>

不变违规：对象在React App中作为React子元素无效

1 个答案: