エラー解決ログ-未定義のCannot read properties

react-refresh-runtime.development.js:315
Uncaught TypeError: Cannot read properties of undefined (reading 'border_crop')

このようなメッセージが表示され、最初は一時的にロードされたようですが、画面には何も表示されませんでした.
border−農作物はAPIからロードされるカード画像の種類であり,この部分に問題がある.
コードを修正し、その部分にデータがないと、一時画像が表示されます.
このようにして、まずページを見てエラーが発生せずにロードしたので、後でこのような対応策を立てるのは安全だと思います.
しかし確認してみると、イメージがないものは全て両面カード.
現在開発中のウェブページでは、magic the gatheringというカードゲームのカードデータが使用されています.
カードを1枚か2枚確認し、全てのデータ構造を把握していると判断したが、例外もあった.
scryfallからロードされたAPIのリストを開き、
片面カードの場合、画像はデータの下にimage URI、両面カードの場合、データの下にcard face配列、下にimage URI、両面カードの場合、さらに次のレベルで検索する必要があります.これは私がAPIを正確に確認していないので、ないデータを取得したいので、ページ全体が表示されていません.
だから解決したコードは以下の通りです.

		<Card.Img
                    variant="top"
                    src={
                        card.image_uris
                            ? card.image_uris.border_crop
                            : card.card_faces[0].image_uris.border_crop
                    }
                />

3つの演算子を使用してapiにcardを入力します.イメージURIが存在する場合、card.image urisインポートデータ、card.image urisがない場合は、デュアルカードと見なし、card faces[0]号から前の画像を取得します.
APIの内部に特定の要素がある場合、コンポーネントを表示することで実現できます.