React×MaterialUIでfailed prop typeエラーが出た原因と解決方法

問題と原因

React,Reduxで個人開発をしていると、以下のエラーに遭遇。

Warning: Failed prop type: Material-UI: Either `children`, `image`, `src` or `component` prop must be specified.

上記のpropには必ず値を割り当ててください、と言われている。

エラーの出力されるコンポーネントの一部分のコードを以下に示す。

const [imageUrl, setImageUrl] = useState(undefined);
    useEffect(() => {
        storage
            .ref(props.imagePath)
            .getDownloadURL()
            .then((url) => {
                setImageUrl(url)
            })
            .catch((e) => console.log('Errors while storage connecting => ', e));
    }, [])

<Card className={classes.root}>
            {/* Header */}
            <CardHeader
                title={props.subject}
            />
            {/* image */}
                <CardMedia
                    className={classes.media}
                    image={imageUrl}
                    title={props.subject}
                />

原因はCardMediaのimage属性が割り当てていなかったからであった。

何故割り当てられなかったかと言うと、image属性の値であるimageUrlは非同期処理により得られる値であり、非同期処理が終了する前に1度コンポーネントが読まれることで未定義のimageUrlがimageに表示されようとするからである。

課題と修正方法

上記より、imageUrlが未定義の時はimage属性で読まれないようにすればいい。

下記を参照した↓

Material UI: either `image` or `src` property must be specified

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

stackoverflow.com

修正したソースコード

const [imageUrl, setImageUrl] = useState(undefined);
    useEffect(() => {
        storage
            .ref(props.imagePath)
            .getDownloadURL()
            .then((url) => {
                setImageUrl(url)
            })
            .catch((e) => console.log('Errors while storage connecting => ', e));
    }, [])

<Card className={classes.root}>
            {/* Header */}
            <CardHeader
                title={props.subject}
            />
            {/* image */}
            {imageUrl ? (
                <CardMedia
                    className={classes.media}
                    image={imageUrl}
                    title={props.subject}
                />
              ) : (<></>)
            }

三項演算子を使用し、

• imageUrlに値が入っている時はCardMediaを読み込む
• 値が入っていない時は空のタグを読み込む

とすることでエラーを回避することができた。

おわり