Javascript 从API获取图像时出现问题

我目前正在练习React，我的目标是构建一个简单的应用程序，搜索电影并显示一些关于它们的简短信息作为结果。我设法从API中提取数据并将它们存储在React钩子中。我可以访问任何数据，但当我尝试提取图像时，会出现错误：

TypeError:无法读取null的属性“medium”

以下是API结果：

我在{show.image.medium}中找到要使用的图像

这是我的代码：

import React, {useState, useEffect} from 'react';
import Movie from './Movie';

const App = () => {

const [movies, setMovies] = useState([]);

useEffect(() => {
  getMovies();
}, []);

const getMovies = async () => {
  const response = await fetch(`http://api.tvmaze.com/search/shows?q=$girls`);
  const data = await response.json();
  setMovies(data);
  console.log(data)

  ;}
  return (
    <div>
    <form className='search-form'>
    <input type='text' className='search-bar' placeholder='search movie'>
    </input>
    <button type='submit' className='search-button'>
    Search
    </button>
    </form>
    {movies.map(movie => (
      <Movie title={movie.show.name} image={movie.show.image.medium} />
    ))}
    </div>
  );
};



export default App;

import React，{useState，useffect}来自“React”；
从“./Movie”导入电影；
常量应用=（）=>{
const[movies，setMovies]=useState（[]）；
useffect（（）=>{
获取电影（）；
}, []);
const getMovies=async（）=>{
const response=等待获取(`http://api.tvmaze.com/search/shows?q=$girls`）；
const data=wait response.json（）；
setMovies（数据）；
console.log（数据）
;}
返回(
搜寻
{movies.map（movie=>(
))}
);
};
导出默认应用程序；

和Movie.js文件：

import React from 'react';

const Movie = ({title, image}) => {
    return(
        <div>
        <h1>{title}</h1>
        <img src={image} alt=''/>
        </div>
    );
}

export default Movie;

从“React”导入React；
康斯特电影=（{title，image}）=>{
返回(
{title}
);
}
导出默认电影；

所以我基本上把结果映射到movie数组中，但是{movie.show.image.medium}不起作用，而拉取任何其他数据就可以了

---

我知道这可能是一个简单的解决办法，但我尝试了一切，并寻找了几个小时的答案，仍然没有任何效果。如果有人能向我解释我做错了什么，我将不胜感激。提前谢谢

在API调用中有一个值，

movie.show.image

在技术上是

null

。对于

null

您无法获取任何属性，即使

中等

作为解决方案，您可以执行以下操作：

{
   movies.map(movie =>
              movie.show.image ?
                  <Movie title={movie.show.name} image={movie.show.image.medium} /> :
              null)
}

{
movies.map（电影=>
电影、表演、影像？
:
空）
}

此外，您还需要从返回

从我的

控制台上的API迭代：


我希望这有帮助
 你确定每部电影都有一个图像字段吗？