[英]Objects are not valid as a React child (found: object with keys {})
[英]Objects are not valid as a React child - firebase database, 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>
);
}
}
jsx代碼應該在return語句里面,試試這段代碼
render() {
return this.state.screams ? (
<Grid container spacing={16}>
<Grid item sm={8} xs={12}>
{this.state.screams.map((scream) => <Scream scream={scream} />}
</Grid>
<Grid item sm={4} xs={12}>
<p>Profile...</p>
</Grid>
</Grid>
) : (
<p>Loading...</p>
);
}
或者您也可以將 recentScreamsMarkup 分配放在渲染之外 function
發生錯誤是因為您在 this.state.screams 上使用 map - 將 this.state.screams 分配給一個變量,然后對該變量調用 map。
let screamsVariable = this.state.screams
let recentScreamsMarkup = screamsVariable ? (
screamsVariable.map((scream) => <Scream scream={scream} />)
) : (
<p>Loading...</p>
);
一些善良的靈魂剛剛幫助我並向我解釋了問題:
“createdAt 的值是一個 object,帶有錯誤消息描述的鍵。你必須告訴 React 如何呈現它。一個簡單的解鎖方法如下所示:
新日期 (createdAt._seconds * 1000).toString()"
謝謝你們的幫助!
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.