Impossible de lire la propriété non définie lors de l'utilisation de hooks React

Question

J'obtiens l'erreur "Impossible de lire la propriété 'map' de indéfinie" mais je ne peux pas comprendre pourquoi - la carte ne fonctionnera pas car 'films' n'est pas défini. Pouvez-vous voir ce que je fais mal? Merci beaucoup.

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

Lorsque vous définissez l'état qui est setMovies (données), movieList sera égal aux données. Ainsi, vous perdrez la propriété des films dans movieList (il n'y aura pas de movieList.movies).

Donc, soit initier un état comme celui-ci

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

et faire setMovies (données).

Ou bien définir un état comme

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