Material-UI:必须指定`image`或`src`属性 [英] Material-UI: either `image` or `src` property must be specified

问题描述

在创建组件时，似乎CardMedia需要图像.由于我是通过componentDidMount(RestAPI)拉取图像数据的，因此该组件已安装.

Its looks like CardMedia need an image while component is created. Since I am pulling the image data via componentDidMount (RestAPI) then the component is already mount.

componentDidMount() {
   // get all items via category ID and owner ID 
    const restApi = new API({ url: 'api' })
    restApi.createEntity({ name: 'items' })
    // api/items/<categoryId>/<ownerId>
    restApi.endpoints.items.getTwo({ id_a: this.props.categoryId, id_b: this.props.ownerId }).then(({ data }) => this.setState({ appData: data }))
}



render() {
    const { classes } = this.props;

    let classNameHolder = [classes.redAvatar, classes.greenAvatar, classes.blueAvatar, classes.purpleAvatar];
    this.state.appData.map(element => {
        this.state.images.push(element.imageUrl);
    });

    return (
        < Card >
            <CardHeader
                avatar={
                    <Avatar aria-label="Recipe"
                        className={classNameHolder[Math.floor(Math.random() * classNameHolder.length)]}>
                        {this.props.userName.charAt(0).toLocaleUpperCase()}
                    </Avatar>}
                title={this.props.userName} disableTypography={true} />
            <CardActionArea disabled={this.state.images.length === 1 ? true : false}>
                <CardMedia
                    id={this.props.ownerId}
                    className={classes.media}
                    image={this.state.images[this.state.imageIndex]}
                    onClick={this.handleOnClick} />
            </CardActionArea>
        </Card >
    );
  }
 }

我可以将所有API上移一个级别，因此我使用道具来传递数据图像，但是我想知道你们是否有任何优雅的解决方案.

I can move the all API one level up so I use the props in order to pass data image but I would like to know if you guys have any some elegant solution .

谢谢

推荐答案

，或者您可以在组件本身中进行简单检查，以免重置状态，例如在加载内容时显示mui微调器这将解决警告并向用户显示良好的反馈

or you can do a simple check in the component itself so to avoid resetting the state, display a mui spinner for instance while content loads this will fix the warning and display nice feedback to the user

<>
  {imgUrl ? (
    <CardMedia
      component="img"
      alt="Contemplative Reptile"
      height="140"
      src={imgUrl}
      title="Contemplative Reptile"
    />
  ) : (
    <Spinner />
  )}
</>

这篇关于Material-UI:必须指定`image`或`src`属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！