Reactjs 对象作为子对象无效（将对象转换为字符串）

运行React代码时，开发服务器显示以下错误：“对象作为React子对象无效（找到：具有键{u秒，{u纳秒}的对象）。如果要呈现子对象集合，请改用数组。”

错误显示在下一行中

this.setState({screams:res.data});

然而，对类似问题的研究表明，将对象作为属性传递时会发生错误

主页

class home extends Component {
    state={
        screams : null
    };
    componentDidMount(){
        axios.get('/screams')
        .then(res=>{
            console.log(res.data);
            *this.setState({
                screams:res.data               
            });*

        })
        .catch(err=>console.log(err));
    }
    render() {
        let recentScreamsMarkup= this.state.screams ? (
            this.state.screams.map((scream) => <Scream scream={scream}/>)
            ) : <p>Loading...</p>
        return(
            <Grid container spacing={5}>
                <Grid item sm={8} xs={12}>
                    {recentScreamsMarkup}
                </Grid>
                <Grid item sm={4} xs={12}>
                    <p>Profile</p>
                </Grid>
            </Grid>
        );
    }
}

class home扩展组件{
陈述={
尖叫声：零
};
componentDidMount（）{
axios.get（“/尖叫声”）
。然后（res=>{
console.log（res.data）；
*这是我的国家({
尖叫：资源数据
});*
})
.catch（err=>console.log（err））；
}
render（）{
让recentScreamsMarkup=this.state.creams(
this.state.screams.map（（scream）=>）
)：正在加载

返回(
{recentScreamsMarkup}
侧面图

);
}
}

尖叫组件

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

类尖叫扩展组件{
render（）{
const{classes，scream:{meme，translation，userImage，userHandle，createdAt，screamId，likeCount，commentCount}}=this.props；
返回(
{userHandle}
{createdAt}
{meme}
{翻译}
)
}
}

---

我相信这个解决方案与JSON.Stringify（）有关，可以将对象转换为字符串，但我尝试过的方法到目前为止都不起作用。非常感谢您的帮助：）

继戈伦的评论之后，您对以下更新有何反应

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

类尖叫扩展组件{
render（）{
const{classes，scream}=this.props；
const{meme，translation，userImage，userHandle，createdAt，screamId，likeCount，commentCount}=scream；
返回(
{JSON.stringify（userHandle）}
{JSON.stringify（createdAt）}
{JSON.stringify（meme）}
{JSON.stringify（翻译）}
)
}
}

几乎可以肯定，基于您的错误，

createdAt

是一个具有以下结构的对象

{_seconds: 123, _nanoseconds: 456}

换线

<Typography variant="body1" color="main">{createdAt}</Typography>

console.log（）中记录的值是多少。如果您可以添加它，它将很容易帮助您。请显示

res.data

是什么。我的直觉是问题出在

createdAt

，它是一个具有

秒和
纳秒属性的对象，您需要在
尖叫
组件中显式提取这些属性。在
尖叫
组件中，打印出
this.props.cream
，并确保数据结构符合预期。当你认为它是一个字符串时，我猜测其中一个对象属性就是一个对象（可能是
createdAt
，因为错误中有时间单位）。控制台日志“res.data”是一个对象-createdAt:{秒：1568399400，_纳秒：0}@ggorlenth控制台日志“this.props.cream”是一个ISOString:“2019-09-17T16:06:13.051Z”“@Jayce444这成功了！！我只需要将createdAt转换为stringThank you’s response:）这种方法解决了最初的问题，因为createdAt现在显示为1568399400:0。但是，createdAt以扩展ISO格式2019-09-17T16:06:13.051Z的字符串形式存储在数据库中，我希望它显示为已存储@Chris Chen的更新成功了
<Typography variant="body1" color="main">
  {`${createdAt._seconds}:${createdAt._nanoseconds}`}
</Typography>