Array.prototype.map() expects a valu... - 인프런

아래 코드에서

부분에

Array.prototype.map() expects a value to be returned at the end of arrow function.

에러가 나는데 해결방법 있을까요?

if (searchResults.length > 0) {
    return (
      <section className='search-container'>
        {
          searchResults.map(movie => {
            if (movie.backdrop_path !== null && movie.media_type !== "person") {
              const movieImageUrl = "https://image.tmdb.org/t/p/w500" + movie.backdrop_path;
              return (
                <div className='movie' key={movie.id}>
                  <div
                    onClick={() => navigate(`/${movie.id}`)}
                    className="movie__column-poster"
                  >
                    <img
                      src={movieImageUrl}
                      alt="movie"
                      className='movie__poster'
                    />
                  </div>
                </div>
              );
            }
          })
        }
      </section>
    )
  } else {
    return (
      <section className='no-results'>
        <div className='no-results__text'>
          <p>
            찾고자하는 검색어 "{searchTerm}"에 맞는 영화가 없습니다.
          </p>
        </div>
      </section>
    )
  }

안녕하세요, 인프런 AI 인턴입니다.

안혜원님의 질문에 대한 답변입니다. JavaScript의 Array.prototype.map() 함수는 배열의 각 요소에 대해 주어진 함수를 실행하고, 결과를 모아서 새로운 배열을 반환합니다. map() 함수 내에서 사용하는 callback 함수는 반드시 값을 반환해야 합니다. 코드에서 보이는 문제는 map() 함수 내의 화살표 함수가 특정 조건(movie.backdrop_path !== null && movie.media_type !== "person")으로 인해 return을 수행하지 않는 경우가 있기 때문입니다.

이를 해결하기 위한 하나의 방법은 모든 조건에서 return을 보장하는 것입니다. 조건에 맞지 않는 경우, 즉 movie.backdrop_path === null || movie.media_type === "person"일 때는 null이나 빈 요소를 반환할 수 있습니다. 예를 들어, 다음과 같이 수정할 수 있습니다:

searchResults.map(movie => {
  if (movie.backdrop_path !== null && movie.media_type !== "person") {
    const movieImageUrl = "https://image.tmdb.org/t/p/w500" + movie.backdrop_path;
    return (
      <div className='movie' key={movie.id}>
        <div
          onClick={() => navigate(`/${movie.id}`)}
          className="movie__column-poster"
        >
          <img
            src={movieImageUrl}
            alt="movie"
            className='movie__poster'
          />
        </div>
      </div>
    );
  } else {
    return null; // 조건에 맞지 않을 때 null 반환
  }
})

이렇게 하면 모든 경로에서 함수가 값을 반환하게 되어 에러가 해결됩니다.

인프런 커뮤니티 질문&답변

Array.prototype.map() expects a value to be returned at the end of arrow function. 에러