Question

我收到错误消息“无法读取未定义的属性'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

您的响应数据只能是列表或undefined，您需要这样做：

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

Answer 2

当设置状态为setMovies（data）时，movieList将等于data。因此，您将失去movieList中的电影属性（不会有movieList.movies）。

所以要么这样启动状态

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

然后执行setMovies（data）。

否则将状态设置为

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

使用React挂钩时无法读取undefined的属性

2 个答案: