javascript - React.map 已定义但显示未定义

Question

更新:

by the way I'm already defined the data with the response in setState({ fetchedData: responseJSON.data })

我刚刚在名为 fetchedData: [] 的 setState 中获取响应数据，我想知道为什么在从以下位置获取 movies 时出现错误this.state.fetchedData 即使我为 this.state.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.movi​​es 执行控制台日志，我会收到响应

[
          { "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", …}
]

我尝试使用 map ，但它不起作用，这是我的代码

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

I’m getting error says Cannot read property 'map' of undefined

然后我做了一个大的研究，我发现我应该使用 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 is not a function

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

谢谢大家对我的帮助

Answer 1

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

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