reactjs - 使用 react 钩子(Hook)时无法读取未定义的属性

Question

我收到错误“无法读取未定义的属性“ map ””，但无法弄清楚为什么 - map 无法工作，因为“电影”未定义。你能看出我做错了什么吗？非常感谢。

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

您响应的数据可能是列表或未定义，您需要这样做:

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