javascript - React 从 API 获取图像的问题

Question

我目前正在练习 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} 不起作用，而提取任何其他数据都可以正常工作。

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

Answer 1

在 API 调用中，有一个值 movie.show.image 在技术上为 null。对于 null，您无法获取任何属性，甚至 medium。

您可以采取以下解决方案:

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

此外，您需要从 Array.prototype.map() 返回 .

从我的控制台上的 API 进行迭代:

希望对您有所帮助!