reactjs - 主页组件不填充数据

Question

我在这里对为什么我的主组件没有从 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) => {
      console.log(response.data);
      this.setState({ screens: response.data})
  })
  .catch((error) => {
      console.error(error);
  })
}
render() {
    let recentData = this.state.screens ?
    (
      this.state.screens.map((screen) => <Screen screen={screen} />)
    ):
    <p>loading ...</p>

    console.log(recentData);
    return (
        <>
        <Grid container spacing={16}>
        <Grid item sm={8} xs={12}>
          {recentData}
        </Grid>
        <Grid item sm={4} xs={12}>
                <p>Profile ...</p>
        </Grid>
        </Grid>
        </>


    )
  }
}
export default home

下面是我用来从材质 UI 生成卡片的屏幕组件

 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 (
           <Card className = {classes.card}>
               <CardMedia
                image={userImage}
                title= "image profile"
                className={classes.image}/>
                <CardContent className={classes.content}>
                    <Typography variant="h5">{userHandle}</Typography>
                    <Typography variant="body2" color="textSecondary">{createAt}</Typography>
                    <Typography variant="body1">{body}</Typography>
                </CardContent>
           </Card>
        )
    }
}

export default withStyles(styles)(Screen);

标签： reactjs