Не удается прочитать свойство undefined при использовании реакционных хуков

Question

Я получаю сообщение об ошибке "Не удается прочитать свойство 'map' of undefined", но не могу понять, почему - карта не будет работать, потому что "movies" не определена. Вы видите, что я делаю не так? Большое спасибо.

const Dashboard = () => {
  const discoverUrl = 'https://movied.herokuapp.com/discover';
  const [movieList, setMovies] = useState({ movies: [] });

  useEffect(() => {
    const getAllMovies = () => {
      fetch(discoverUrl)
        .then(response => response.json())
         .then(data => setMovies(data))
        }
        getAllMovies()

      }, [])

  return (
    <ul>
      {movieList.movies.map(movie => (
        <li>
          <p>{movie}</p>
        </li>
      ))}
    </ul>
  );
}

export default Dashboard```

TypeError: Cannot read property 'map' of undefined

Answer 1

Вы отвечаете, данные могут быть списком или undefined вам нужно сделать так:

setMovies(pre => ({
  ...pre,
  movies: data || []
}))

Answer 2

Когда вы устанавливаете состояние, которое установлено setMovies(data), movieList будет равен data. Таким образом, вы потеряете свойство movie в movieList(не будет movieList.movies).

Так что либо инициировать состояние, как это

const [movieList, setMovies] = useState([]);

и сделать setMovies (данные).

Или установить состояние как

setMovies({ movies: [...data] })