reactjs - 对象作为 React 子级无效 - firebase 数据库,axios
问题描述
我正在编写一个教程,在该教程中我使用 firebase 创建后端内容,然后使用 react 创建前端。我收到说错误,我认为这与我的代码行有关:this.state.screams.map((scream) => <Scream scream={scream} />)
. 我不知道如何解决它。任何有关如何编写此内容的帮助将不胜感激。
我在 jsfiddle 上写了我的代码。谢谢!
https://jsfiddle.net/cvizena/8r3vpkdz/3/
// Scream.js
import React, { Component } from 'react';
import withStyles from '@material-ui/core/styles/withStyles';
import Link from 'react-router-dom/Link';
// MUI Stuff
import Card from '@material-ui/core/Card';
import CardContent from '@material-ui/core/CardContent';
import CardMedia from '@material-ui/core/CardMedia';
import Typorgraphy from '@material-ui/core/Typography';
import Typography from '@material-ui/core/Typography';
const styles = {
card: {
display: 'flex',
marginBottom: 20
},
image: {
minWidth: 200
},
content: {
padding: 25,
objectFit: 'cover'
}
};
class Scream extends Component {
render() {
const {
classes,
scream: {
body,
createdAt,
userImage,
userHandle,
screamId,
likeCount,
commentCount
}
} = this.props;
return (
<Card className={classes.card}>
<CardMedia
image={userImage}
title="Profile image"
className={classes.image}/>
<CardContent class={classes.content}>
<Typorgraphy variant="h5">{userHandle}</Typorgraphy>
<Typography variant="body2" color="textSecondary">{createdAt}
</Typography>
<Typography variant="body1">{body}</Typography>
</CardContent>
</Card>
);
}
}
// home.js
import React, { Component } from 'react';
import axios from 'axios';
import Grid from '@material-ui/core/Grid';
import Scream from '../components/Scream';
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={16}>
<Grid item sm={8} xs={12}>
{recentScreamsMarkup}
</Grid>
<Grid item sm={4} xs={12}>
<p>Profile...</p>
</Grid>
</Grid>
);
}
}
解决方案
某个善良的灵魂刚刚帮助了我并向我解释了这个问题:
“createdAt 的值是一个带有错误消息描述的键的对象。你必须告诉 React 如何呈现它。解除阻塞的简单方法如下所示:
新日期(createdAt._seconds * 1000).toString()"
谢谢你们的帮助!
推荐阅读
- apache - 带有 weblogic 的 Kerberos SSO
- android - 谷歌地图没有出现,只有谷歌标志出现在模拟器中
- actions-on-google - 尝试发布 Google 操作时出现错误消息(缺少查询模式)
- python - python不连接mysql。pymysql.err.OperationalError: (1045, "Access denied for user 'root'@'localhost' (using password: NO)")
- python - Spyder,在 python 2 和 3 之间切换
- java - setCellFactory 覆盖 updateItem 并换行
- javascript - 在网页中运行 Python 脚本
- python - 如何在 Sublime Text 3 中运行 Python 时删除输出缓冲
- c# - 使用静态仅获取属性线程安全?
- django - Django/Python:如何遍历字典中的列表以进行迁移/迁移数据