TypeError: Cannot read property 'map' of undefined というエラーが出る。

Question

こちらのサイトの内容をTypeScriptで書いているのですが、エラーの解消方法を教えていただきたいです。

エディタ上でのエラーは出ていないのですがブラウザ上でエラーが出ています。

インターネットでこのエラーを調べるとタイプミスであったり、値が与えられてなかったりしていたのですが自分で見る限り見つけることはできませんでした。下にコードを貼っておきます。

/*Search.tsx*/

import React, { useState } from 'react';

export interface SearchProps {
	search: (searchValue: string) => void
}

const Search = (props: SearchProps) => {
	const [searchValue, setSearchValue] = useState('');

	const handleSearchInputChanges = (e: React.ChangeEvent<HTMLInputElement>) => {
		setSearchValue(e.target.value);
	};

	const resetInputField = () => {
		setSearchValue('');
	};

	const callSearchFunction = (e: React.MouseEvent<HTMLInputElement, MouseEvent>) => {
		e.preventDefault();
		props.search(searchValue);
		resetInputField();
	};

	return (
		<form className='search'>
			<input
				value={searchValue}
				onChange={handleSearchInputChanges}
				type="text"
			/>
			<input onClick={callSearchFunction} value='SEARCH' type="submit" />
		</form>
	);

};

export default Search;

/*Movie.tsx*/

import React from 'react';

const DEFAULT_PLACEHOLDER_IMAGE = 'https://m.media-amazon.com/images/M/MV5BMTczNTI2ODUwOF5BMl5BanBnXkFtZTcwMTU0NTIzMw@@._V1_SX300.jpg';

export interface MovieObj {
	Poster: string,
	Title: string,
	Year: number,
}

const Movie: React.FC<{ movie: MovieObj }> = ({ movie }) => {
	const poster =
		movie.Poster === 'N/A'
			? DEFAULT_PLACEHOLDER_IMAGE
			: movie.Poster;

	return (
		<div className="movie">
			<h2>{movie.Title}</h2>
			<div>
				<img
					width="200"
					src={poster}
					alt={`The movie titled: ${movie.Title}`}
				/>
			</div>
			<p>({movie.Year})</p>
		</div>
	);
};

export default Movie;

/*App.tsx*/

import React, { useEffect, useReducer } from 'react';
import '../App.css';
import Header from './Header';
// eslint-disable-next-line no-unused-vars
import Movie, { MovieObj } from './Movie';
import Search from './Search';

const MOVIE_API_URL = 'http://www.omdbapi.com/?i=tt3896198&apikey=db671368';


interface ISearchMoviesRequest {
	type: 'SEARCH_MOVIES_REQUEST'
}

interface ISearchMoviesSuccess {
	type: 'SEARCH_MOVIES_SUCCESS',
	payload: MovieObj[]
}

interface ISearchMoviesFailure {
	type: 'SEARCH_MOVIES_FAILURE',
	error: string
}

type IActions =
	| ISearchMoviesRequest
	| ISearchMoviesSuccess
	| ISearchMoviesFailure;

interface IState {
	loading: boolean,
	movies: MovieObj[],
	errorMessage: string | null
}

const initialState: IState = {
	loading: true,
	movies: [],
	errorMessage: null
};

const reducer = (state: IState, action: IActions): IState => {
	switch (action.type) {
		case 'SEARCH_MOVIES_REQUEST':
			return {
				...state,
				loading: true,
				errorMessage: null
			};
		case 'SEARCH_MOVIES_SUCCESS':
			return {
				...state,
				loading: false,
				movies: action.payload
			};
		case 'SEARCH_MOVIES_FAILURE':
			return {
				...state,
				loading: false,
				errorMessage: action.error
			};
		default:
			return state;
	}
};

const App = () => {
	const [state, dispatch] = useReducer(reducer, initialState);

	useEffect(() => {

		fetch(MOVIE_API_URL)
			.then(response => response.json())
			.then(jsonResponse => {

				dispatch({
					type: 'SEARCH_MOVIES_SUCCESS',
					payload: jsonResponse.Search
				});
			});
	}, []);

	const search = (searchValue: string): void => {
		dispatch({
			type: 'SEARCH_MOVIES_REQUEST'
		});

		fetch(`http://www.omdbapi.com/?i=${searchValue}&apikey=db671368`)
			.then(response => response.json())
			.then(jsonResponse => {
				if (jsonResponse.response === 'True') {
					dispatch({
						type: 'SEARCH_MOVIES_SUCCESS',
						payload: jsonResponse.Search
					});
				} else {
					dispatch({
						type: 'SEARCH_MOVIES_FAILURE',
						error: jsonResponse.Error
					});
				}
			});
	};

	const { movies, errorMessage, loading } = state;

	return (
		<div className="App">
			<Header text="HOOKED" />
			<Search search={search} />
			<p className="App-intro">Sharing a few of our favourite movies</p>
			<div className="movies">
				{loading && !errorMessage
					? (<span>loading... </span>)
					: errorMessage
						? (<div className="errorMessage">{errorMessage}</div>)
						: (movies.map((movie: MovieObj, index: number) => (
							<Movie key={`${index}-${movie.Title}`} movie={movie} />
						))
						)}
			</div>
		</div>
	);
};

export default App;

1つ自信がない部分がApp.tsxのconst App = () => {}でのfetch内で、APIを使ったことがなくかつTypeScriptも初学習であるため合っているのかわからないです。（そこでmoviesに値が渡されていない?）

よろしくお願いいたします。

環境
React: 16.12.0
TypeScript: 3.7.5

Answer 1

moviesがundefinedかと思います。
console.logでmoviesが来ているか確認してみてください！

ちなみに、この記事がApiからデータを取得する方法としてはわかりやすかったですよ！

Comments

[yaaasuuu]

仰る通りundifinedとなっていました...

記事ありがとうございます！もう少し頑張ってみます！

Answer 2

結論からいうとAPIの仕様を詳しく見ていなかったのが原因でした。

コードの変更部分は2つあります。

1 OMDbAPIのUsageを見ると、Searchによって検索するには元のコードのURL部分を変更する必要がありました。

/*App.tsx*/
...
// 8行目
const MOVIE_API_URL = 'http://www.omdbapi.com/?i=tt3896198&apikey=db671368;

...

から

// パラメータiをsとする。(XXXは検索したい文字列)
const MOVIE_API_URL = 'http://www.omdbapi.com/?s=XXX&apikey=db671368;

としました。

2 次にAPIから返ってくるjsonファイルを見てみると、

{
  "Search": [
      {"Title":"hoge","Year":"2000","Poster":"http://hoge "},
      {"Title":"foo","Year":"1900","Poster":"http://foo "}
  ],
  "Response":"True"
}

といったように、Responseが返ってきます。(コードは整形してます)
しかしresponseと書いてしまっていたため何が来てもelse部に入ってしまいmoviesが空となっていました。

fetch(`http://www.omdbapi.com/?apikey=db671368&s=${searchValue}`)
  .then(response => response.json())
  .then(jsonResponse => {
    
    // この部分が response でなく Response
    if (jsonResponse.response === 'True') {
      
      dispatch({
        type: 'SEARCH_MOVIES_SUCCESS',
        payload: jsonResponse.Search
      });
    } else {
      dispatch({
        type: 'SEARCH_MOVIES_FAILURE',
        error: jsonResponse.Error
      });				
    }
  });

しっかりと仕様を読むべきでした...
回答してくださったamedama様の貼ってくださった記事も、axiosを用いたAPIの扱いがわかりやすく書いてあったので全体の流れを整理して考えることができました。(useReducerと一緒に使う練習をしていきたいです)。ありがとうございました。