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

TypeError: Cannot read property 'medium' of null.

以下是 API 结果： http://api.tvmaze.com/search/shows?q=$girls

我找到了一张我想使用的图像，它存储在 {show.image.medium} 中

这是我的 React 代码：

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;

和 Movie.js 文件：

import React from 'react';

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

export default Movie;

所以我基本上将结果映射到 movie 数组中，但 {movie.show.image.medium} 不起作用，而提取任何其他数据都可以正常工作。

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