Reactjs 失败的道具类型：材质UI:必须在ForwardRef（CardMedia）中指定'children'、'image'、'src'或'component'道具

每当我试图在我的页面上发布新的尖叫时。我没有得到卡片的图像、标题和内容。我需要重新装弹才能拿到

它是说失败的道具类型意味着在发布尖叫声后，我没有从道具类型中获得价值，但在重新加载后，一切似乎都很好。我不知道发生了什么事。请看一下我的代码

这是我的尖叫。js，我在这里展示我的尖叫

Scream.js

    const styles = {
      card: {
        position: "relative",
        display: "flex",
        marginBottom: 20,
      },
      image: {
        minWidth: 150,
      },
      content: {
        padding: 25,
        objectFit: "cover",
      },
    };
    class Scream extends Component {
      render() {
        dayjs.extend(relativeTime);
        const {
          classes,
          scream: {
            body,
            createdAt,
            userImage,
            userHandle,
            screamId,
            likeCount,
            commentCount,
          },
          user: {
            authenticated,
            credentials: { handle },
          },
        } = this.props;
    
        const deleteButton =
          authenticated && userHandle === handle ? (
            <DeleteScream screamId={screamId} />
          ) : null;
    
        const likeButton = !authenticated ? (
          <Link to="/login">
            <MyButton tip="Like">
              <FavoriteBorder color="primary" />
            </MyButton>
          </Link>
        ) : this.likedScream() ? (
          <MyButton tip="Undo like" onClick={this.unlikeScream}>
            <FavoriteIcon color="primary" />
          </MyButton>
        ) : (
          <MyButton tip="Like" onClick={this.likeScream}>
            <FavoriteBorder color="primary" />
          </MyButton>
        );
    
        return (
          <Card className={classes.card}>
            <CardMedia
              image={userImage}
              title="Profile Image"
              className={classes.image}
            />
            <CardContent className={classes.content}>
              <Typography variant="h5" component={Link} to={`/users/${userHandle}`}>
                {userHandle}
              </Typography>
              {deleteButton}
              <Typography variant="body2" color="textSecondary">
                {dayjs(createdAt).fromNow()}
              </Typography>
              <Typography variant="body1">{body}</Typography>
              {likeButton}
              <span> {likeCount} Likes </span>
              <MyButton tip="comments">
                <ChatIcon color="primary" />
              </MyButton>
              <span> {commentCount} Comments </span>
            </CardContent>
          </Card>
        );
      }
    }
    
    Scream.propTypes = {
      likeScream: PropTypes.func.isRequired,
      unlikeScream: PropTypes.func.isRequired,
      user: PropTypes.object.isRequired,
      scream: PropTypes.object.isRequired,
      classes: PropTypes.object.isRequired,
    };
    
    const mapStateToprops = (state) => ({
      user: state.user,
    });
    
    const mapActionToProps = {
      likeScream,
      unlikeScream,
    };
    
    export default connect(
      mapStateToprops,
      mapActionToProps
    )(withStyles(styles)(Scream));

class PostScream extends Component {
    state = {
        open: false,
        body: "",
        errors: {}
    }

    componentWillReceiveProps(nextProps) {
        if(nextProps.UI.errors) {
            this.setState({
                errors: nextProps.UI.errors
            });
        }
        if(!nextProps.UI.errors && !nextProps.UI.loading) {
            this.setState({
                body: "",
                open: false,
                errors: {}
            })
        }
    }

    handleOpen = () => {
        this.setState({ open: true })
    };

    handleClose = () => {
        this.props.clearErrors();
        this.setState({ open: false, errors: {} });
    };

    handleChange = (event) => {
        this.setState({ [event.target.name]: event.target.value })
    }

    handleSubmit = (event) => {
        event.preventDefault();
        this.props.postScream({ body: this.state.body })
    }

    render() {
        const { errors } = this.state;
        const { classes, UI: { loading }} = this.props;
        return (
            <Fragment>
                <MyButton onClick= { this.handleOpen } tip="Post a Scream!">
                    <AddIcon />
                </MyButton>

                <Dialog
                    open= { this.state.open } 
                    onClose= { this.handleClose }
                    fullWidth
                    maxWidth = "sm"
                >
                    <MyButton
                        tip="Close"
                        onClick={this.handleClose}
                        tipClassName={classes.closeButton}
                    >
                        <CloseIcon />
                    </MyButton>

                    <DialogTitle> Post a new Scream </DialogTitle>
                    <DialogContent>
                        <form onSubmit= { this.handleSubmit }>
                            <TextField
                                name="body"
                                type="text"
                                label="SCREAM!"
                                multiline
                                rows="3"
                                placeholder= "What's on your mind!"
                                error={ errors.body ? true: false }
                                helperText={ errors.body }
                                className={classes.TextField}
                                onChange={ this.handleChange }
                                fullWidth
                            />

                            <Button 
                                type="submit"
                                variant="contained"
                                color="primary"
                                className={classes.submitButton}
                                disabled={ loading }
                            >   
                                Submit
                                {loading && ( 
                                    <CircularProgress size={30} className={ classes.progressSpinner } />
                                )}
                            </Button>
                        </form>
                    </DialogContent>
                </Dialog>
            </Fragment>
        )
    }
}

PostScream.propTypes = {
    postScream: PropTypes.func.isRequired,
    clearErrors: PropTypes.func.isRequired,
    UI: PropTypes.object.isRequired
}

const mapStateToProps = (state) => ({
    UI: state.UI
});

export default connect(
    mapStateToProps,
    { postScream, clearErrors }
)(withStyles(styles)(PostScream));

const styles={
卡片：{
职位：“相对”，
显示：“flex”，
marginBottom:20，
},
图片：{
最小宽度：150，
},
内容：{
填充：25，
objectFit：“封面”，
},
};
类尖叫扩展组件{
render（）{
dayjs.extend（相对时间）；
常数{
班级，
尖叫：{
身体，
创建数据，
用户图像，
用户句柄，
尖叫声，
比如说，
伯爵，
},
用户：{
认证，
凭据：{handle}，
},
}=这是道具；
常量删除按钮=
已验证的&&userHandle===句柄(
)：null；
常量likeButton=！已验证(
)：这个。像尖叫一样(
) : (
);
返回(
{userHandle}
{deleteButton}
{dayjs（createdAt）.fromNow（）}
{body}
{likeButton}
{likeCount}喜欢
{commentCount}注释
);
}
}
尖叫声.propTypes={
likeStream:PropTypes.func.isRequired，
不相似：需要PropTypes.func.isRequired，
用户：PropTypes.object.isRequired，
尖叫：PropTypes.object.isRequired，
类：PropTypes.object.isRequired，
};
常量mapStateToprops=（状态）=>({
用户：state.user，
});
常量mapActionToProps={
就像流，
不像奶油，
};
导出默认连接(
MapStateTops，
mapActionToProps
)（尖叫声）；

正如你所看到的，我在道具中有userImage、userHandle和卡片主体，它显示在我的页面上

但是在发布了一条新的尖叫声之后，我不会得到新尖叫声的图像、用户句柄和主体，除非重新加载它

postshray.js

    const styles = {
      card: {
        position: "relative",
        display: "flex",
        marginBottom: 20,
      },
      image: {
        minWidth: 150,
      },
      content: {
        padding: 25,
        objectFit: "cover",
      },
    };
    class Scream extends Component {
      render() {
        dayjs.extend(relativeTime);
        const {
          classes,
          scream: {
            body,
            createdAt,
            userImage,
            userHandle,
            screamId,
            likeCount,
            commentCount,
          },
          user: {
            authenticated,
            credentials: { handle },
          },
        } = this.props;
    
        const deleteButton =
          authenticated && userHandle === handle ? (
            <DeleteScream screamId={screamId} />
          ) : null;
    
        const likeButton = !authenticated ? (
          <Link to="/login">
            <MyButton tip="Like">
              <FavoriteBorder color="primary" />
            </MyButton>
          </Link>
        ) : this.likedScream() ? (
          <MyButton tip="Undo like" onClick={this.unlikeScream}>
            <FavoriteIcon color="primary" />
          </MyButton>
        ) : (
          <MyButton tip="Like" onClick={this.likeScream}>
            <FavoriteBorder color="primary" />
          </MyButton>
        );
    
        return (
          <Card className={classes.card}>
            <CardMedia
              image={userImage}
              title="Profile Image"
              className={classes.image}
            />
            <CardContent className={classes.content}>
              <Typography variant="h5" component={Link} to={`/users/${userHandle}`}>
                {userHandle}
              </Typography>
              {deleteButton}
              <Typography variant="body2" color="textSecondary">
                {dayjs(createdAt).fromNow()}
              </Typography>
              <Typography variant="body1">{body}</Typography>
              {likeButton}
              <span> {likeCount} Likes </span>
              <MyButton tip="comments">
                <ChatIcon color="primary" />
              </MyButton>
              <span> {commentCount} Comments </span>
            </CardContent>
          </Card>
        );
      }
    }
    
    Scream.propTypes = {
      likeScream: PropTypes.func.isRequired,
      unlikeScream: PropTypes.func.isRequired,
      user: PropTypes.object.isRequired,
      scream: PropTypes.object.isRequired,
      classes: PropTypes.object.isRequired,
    };
    
    const mapStateToprops = (state) => ({
      user: state.user,
    });
    
    const mapActionToProps = {
      likeScream,
      unlikeScream,
    };
    
    export default connect(
      mapStateToprops,
      mapActionToProps
    )(withStyles(styles)(Scream));

class PostScream extends Component {
    state = {
        open: false,
        body: "",
        errors: {}
    }

    componentWillReceiveProps(nextProps) {
        if(nextProps.UI.errors) {
            this.setState({
                errors: nextProps.UI.errors
            });
        }
        if(!nextProps.UI.errors && !nextProps.UI.loading) {
            this.setState({
                body: "",
                open: false,
                errors: {}
            })
        }
    }

    handleOpen = () => {
        this.setState({ open: true })
    };

    handleClose = () => {
        this.props.clearErrors();
        this.setState({ open: false, errors: {} });
    };

    handleChange = (event) => {
        this.setState({ [event.target.name]: event.target.value })
    }

    handleSubmit = (event) => {
        event.preventDefault();
        this.props.postScream({ body: this.state.body })
    }

    render() {
        const { errors } = this.state;
        const { classes, UI: { loading }} = this.props;
        return (
            <Fragment>
                <MyButton onClick= { this.handleOpen } tip="Post a Scream!">
                    <AddIcon />
                </MyButton>

                <Dialog
                    open= { this.state.open } 
                    onClose= { this.handleClose }
                    fullWidth
                    maxWidth = "sm"
                >
                    <MyButton
                        tip="Close"
                        onClick={this.handleClose}
                        tipClassName={classes.closeButton}
                    >
                        <CloseIcon />
                    </MyButton>

                    <DialogTitle> Post a new Scream </DialogTitle>
                    <DialogContent>
                        <form onSubmit= { this.handleSubmit }>
                            <TextField
                                name="body"
                                type="text"
                                label="SCREAM!"
                                multiline
                                rows="3"
                                placeholder= "What's on your mind!"
                                error={ errors.body ? true: false }
                                helperText={ errors.body }
                                className={classes.TextField}
                                onChange={ this.handleChange }
                                fullWidth
                            />

                            <Button 
                                type="submit"
                                variant="contained"
                                color="primary"
                                className={classes.submitButton}
                                disabled={ loading }
                            >   
                                Submit
                                {loading && ( 
                                    <CircularProgress size={30} className={ classes.progressSpinner } />
                                )}
                            </Button>
                        </form>
                    </DialogContent>
                </Dialog>
            </Fragment>
        )
    }
}

PostScream.propTypes = {
    postScream: PropTypes.func.isRequired,
    clearErrors: PropTypes.func.isRequired,
    UI: PropTypes.object.isRequired
}

const mapStateToProps = (state) => ({
    UI: state.UI
});

export default connect(
    mapStateToProps,
    { postScream, clearErrors }
)(withStyles(styles)(PostScream));

class postshray扩展组件{
状态={
开：错，
正文：“，
错误：{}
}
组件将接收道具（下一步）{
if（nextrops.UI.errors）{
这是我的国家({
错误：nextrops.UI.errors
});
}
如果（！nextrops.UI.errors&&！nextrops.UI.loading）{
这是我的国家({
正文：“，
开：错，
错误：{}
})
}
}
handleOpen=（）=>{
this.setState（{open:true}）
};
handleClose=（）=>{
this.props.clearErrors（）；
this.setState（{open:false，errors:{}}）；
};
handleChange=（事件）=>{
this.setState（{[event.target.name]：event.target.value}）
}
handleSubmit=（事件）=>{
event.preventDefault（）；
this.props.postshray（{body:this.state.body}）
}
render（）{
const{errors}=this.state；
const{classes，UI:{loading}}=this.props；
返回(