React.map 已定义但未定义

Question

更新：

顺便说一句，我已经定义了带有响应的数据 setState({ fetchedData: responseJSON.data })

我只是在 setState 中获取名为 fetchedData: [] 的响应数据@我正在获取这些数据

{
"data":{
    "title": "The Basics - Networking",
    "description": "Your app fetched this from a remote endpoint!",
        "movies": [
          { "id": "1", "movieTitle": "Star Wars", …},
          { "id": "2", "movieTitle": "Back to the Future", …}
          { "id": "3", "movieTitle": "The Matrix", …}
          { "id": "4", "movieTitle": "Inception", …},
          { "id": "5", "movieTitle": "Interstellar", …}
        ]
   }
}

另外，如果我为 this.state.fetchedData.movies 进行控制台日志，我会收到回复

[
          { "id": "1", "movieTitle": "Star Wars", …},
          { "id": "2", "movieTitle": "Back to the Future", …}
          { "id": "3", "movieTitle": "The Matrix", …}
          { "id": "4", "movieTitle": "Inception", …},
          { "id": "5", "movieTitle": "Interstellar", …}
]

我已经尝试使用地图它不起作用这是我的代码

const allNews = this.state.fetchedData.movies.map((data) =>
  <ul>
      <li key={data.id}>{data.total}</li>
  </ul>
);

我收到错误消息：无法读取未定义的属性“地图”

然后我做了一个大的研究，我应该使用 object.key 这是我的代码：

const getData = this.state.fetchedData.map((items, index) => {
    return (
        <ul key={index}>
            {Object.keys(items.movies).map((movie) => {
                return (
                    <li key={movie.id}>{key.movieTitle}</li>
                )
            })}
        </ul>
    )
});

我收到错误提示

this.state.fetchedData.map 不是函数

我真的不知道我的问题出在哪里，即使我控制台记录数据我得到了正确的响应

谢谢你们帮助我

Answer 1

您没有正确遍历您的状态，这将解决您的问题。

const allNews = this.state.fetchedData.data.movies.map((data) =>
  <ul>
      <li key={data.id}>{data.total}</li>
  </ul>
);

Answer 2

打印this.state.fetchedData.movies 时如何得到{ movies: [ ... ] }？按照this.state.fetchedData 的形状，您应该只获得movies 中的数组，但会获得一个内部包含movies 键的对象。

你试过this.state.fetchedData.movies.movies.map吗？ this.state.fetchedData.movies 怎么不只是电影数组？如果它是一个对象，你不能在它上面调用map。

你什么时候打电话给setState({ fetchedData: responseJSON.data })？何时调用this.state.fetchedData.movies.map？您如何确定在初始渲染中使用fetchedData 设置了状态？