Question

更新：

顺便说一下，我已经用响应来定义了数据 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.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>
);

我收到错误说不能阅读财产＆＃39; map＆＃39;未定义的

然后我做了一个很大的研究，我得到了我应该使用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设置状态？

React.map已定义，但表示未定义

2 个答案: