reactjs - 使用反应钩子时无法读取未定义的属性

Question

我收到错误“无法读取未定义的属性 'map'”，但无法找出原因 - map 无法工作，因为 '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

您响应数据 mybe 一个列表，或者undefined您需要这样做：

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

Answer 2

当您设置状态为 setMovies(data) 时，movieList 将等于数据。所以你会失去movieList中的movies属性（不会有movieList.movi​​es）。

所以要么像这样启动状态

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

并执行 setMovies(data)。

或者像这样设置状态

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