TypeError: Cannot read property 'map' of null Reactjs

Question

Link to the TypeError Screenshot

该应用程序昨天运行良好。我删除了项目并从 Github.com 克隆。还是不行。这是代码的 link： Link to the Github Project

import React from 'react';

function SearchMovies(props) {
  const FavoriteComponent = props.favoriteComponent;
  return (
    <>
      {props.movies.map((movie, index) => (
        <div>
          s<img src={movie.Poster} alt='movie'></img>
          <div onClick={() => props.handleFavoritesClick(movie)}>
            <FavoriteComponent />
          </div>
        </div>
      ))}
    </>
  );
}

export default SearchMovies;

Answer 1

在您的 SearchMovies 组件中尝试使用 null 传播来避免该错误。

{props.movies?.map((movie, index) => (...

import React from 'react';

function SearchMovies(props) {
  const FavoriteComponent = props.favoriteComponent;
  return (
    <>
      {props.movies?.map((movie, index) => (
        <div>
          s<img src={movie.Poster} alt='movie'></img>
          <div onClick={() => props.handleFavoritesClick(movie)}>
            <FavoriteComponent />
          </div>
        </div>
      ))}
    </>
  );
}

export default SearchMovies;

修正后的工作应用程序：Stackblitz

TypeError: Cannot read property 'map' of null Reactjs

TypeError: Cannot read property 'map' of null Reactjs

reactjs

omdbapi