Блог

У меня есть путаница здесь относительно того, почему мой домашний компонент не заполняет данные из firebase, но если я проверю страницу, это утешит, вот мой домашний компонент

 import React, { Component } from 'react' import axios from 'axios';  import Grid from "@material-ui/core/Grid";  import Screen from "../components/Screen";  export class home extends Component {  state = {  screens: null } componentDidMount() {  axios.get("/screens")  .then((response) =gt; {  console.log(response.data);  this.setState({ screens: response.data})  })  .catch((error) =gt; {  console.error(error);  }) } render() {  let recentData = this.state.screens ?  (  this.state.screens.map((screen) =gt; lt;Screen screen={screen} /gt;)  ):  lt;pgt;loading ...lt;/pgt;   console.log(recentData);  return (  lt;gt;  lt;Grid container spacing={16}gt;  lt;Grid item sm={8} xs={12}gt;  {recentData}  lt;/Gridgt;  lt;Grid item sm={4} xs={12}gt;  lt;pgt;Profile ...lt;/pgt;  lt;/Gridgt;  lt;/Gridgt;  lt;/gt;    )  } } export default home  

а ниже приведен мой компонент экрана, который я использую для создания карты из пользовательского интерфейса material

 import React, { Component } from 'react' import withStyles from '@material-ui/core/styles/withStyles'; import Card from '@material-ui/core/Card'; import CardContent from '@material-ui/core/CardContent'; import CardMedia from '@material-ui/core/CardMedia'; import Typography from '@material-ui/core/Typography';  const styles = {  card: {  display: 'flex',  marginBottom: 20  },  image: {  width: 200  },  content: {  padding: 25,  object: "cover"  } }  export class Screen extends Component {  render() {  const {classes, screen: {body, createAt, userImage, weight, userHandle, screenId}} = this.props;  return (  lt;Card className = {classes.card}gt;  lt;CardMedia  image={userImage}  title= "image profile"  className={classes.image}/gt;  lt;CardContent className={classes.content}gt;  lt;Typography variant="h5"gt;{userHandle}lt;/Typographygt;  lt;Typography variant="body2" color="textSecondary"gt;{createAt}lt;/Typographygt;  lt;Typography variant="body1"gt;{body}lt;/Typographygt;  lt;/CardContentgt;  lt;/Cardgt;  )  } }  export default withStyles(styles)(Screen);