Question

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

cmake -DCMAKE_CXX_FLAGS_INIT="-D_UNICODE -U_MBCS" ...

我可以将所有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>);

像这样，我们等待渲染异步数据，然后再渲染该组件，之前我已进行过更改，而不是禁用该组件只是阻止渲染（如果您仍然没有图像）。

Answer 3

我遇到了同样的问题，并通过在构造函数中初始化该状态来解决了这个问题。 “ CardMedia”具有“图像”属性，该属性需要接收一个字符串，但是当您要在其中发送状态时，例如image={this.state.images[this.state.imageIndex]}，它会在第一个发送时间返回null。您可以通过在构造函数中添加以下代码来解决该问题。

this.state = {
      images: 'some default address/link/values'
    };

Answer 4

const photos = [
  "http://i.photo.cc/300?img=1",
  "http://i.photo.cc/300?img=2",
  "http://i.photo.cc/300?img=3",
  "http://i.photo.cc/300?img=4"
];

{photos.map(photo => (
   <CardMedia image={photo} />
))}

使用直接网址提供图片道具也可以！

Answer 5

我也遇到过同样的问题，我只是在 image 的 <CardMedia> 道具中添加了一个图片链接。

喜欢

<CardMedia
     id={this.props.ownerId}
     className={classes.media}
     image={this.state.images[this.state.imageIndex] || 'https://user-images.githubusercontent.com/194400/49531010-48dad180-f8b1-11e8-8d89-1e61320e1d82.png'}
     onClick={this.handleOnClick} />

对我来说它解决了，只需添加一个图片链接。

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

5 个答案: