Material-UI：必须指定 `image` 或 `src` 属性

Question

它看起来像 CardMedia 在创建组件时需要一个图像。由于我是通过 componentDidMount (RestAPI) 拉取图像数据，因此组件已经安装。

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 上移一级，因此我使用道具来传递数据图像，但我想知道你们是否有一些优雅的解决方案。

谢谢

Answer 1

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

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

Answer 2

不确定 appData 包含什么，但我对您的代码做了一些更改，希望能让您更好地理解。

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

    let classNameHolder = [classes.redAvatar, classes.greenAvatar, classes.blueAvatar, classes.purpleAvatar];
/*
    // you don't save the return of the next array anywhere, so this map is doing nothing.
    this.state.appData.map(element => {
        // you cannot redefine state like this, to redefine state you have to use setState
        this.state.images.push(element.imageUrl);
    });
*/

    const imagesUrl = this.state.appData.map(el => el.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} />
{/* This part I don't undestand much what you try to do, I can propose use map of imagesUrl. But to help you more I need to know more info about what you try to do here */}
            {/* Let's not render this part of the component instead of disabled it */}
            {imagesUrl.length > 0 &&
              <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 >
    );
  }
 }

建议检查您的数组 appData，也许在检索内容后打印内容是个好主意，让我们看一个示例。

  const { classes } = this.props;

  const classNameHolder = [classes.redAvatar, classes.greenAvatar, classes.blueAvatar, classes.purpleAvatar];
  const AvatarComponent = (
    <Avatar aria-label="Recipe"
      className={classNameHolder[Math.floor(Math.random() * 
  classNameHolder.length)]}>
      {this.props.userName.charAt(0).toLocaleUpperCase()}
    </Avatar>
  );

  return (<div className="Cards">
    {this.state.appData.map(data => (
      <Card>
        <CardHeader avatar={AvatarComponent} title={this.props.userName} disableTypography={true} />

        <CardActionArea disabled={data.imageUrl !== ''}>
          <CardMedia
            id={this.props.ownerId}
            className={classes.media}
            image={this.state.images[this.state.imageIndex]}
            onClick={this.handleOnClick} />
        </CardActionArea>
      </Card>
    ))}
  </div>);

像这样，我们在渲染组件之前等待获取异步数据，之前我更改过，而不是禁用组件，只是在仍然没有图像时阻止渲染它。