如何在反应中管理 API 的响应？答案

【问题标题】：How to Manage the response of the API in react?如何在反应中管理 API 的响应？
【发布时间】：2021-03-29 14:14:09
【问题描述】：

我向API做了一个请求，然后响应如下：

data1 = [{id: 1, code:1, title:title1}, {id:2, code:3, title:title2}, ...]

现在我想提取上述响应的标题数组，如下所示：

titles = [title1, title2, ....]

如何通过地图做到这一点？

还有第二个问题：

考虑响应是否如下：

data2 = [{id: 1, code:1, title:title1, chapters:[{id:1, chapter: chapter1},{id:2, chapter: chapter2}, ...]}, {id ：4，代码：5，标题：title3，章节：[{id：4，章节：chapter3}，...]}，...]

在这种情况下，我如何提取章节数组如下：

章节 = [第 1 章、第 2 章、第 3 章]

我尝试如下：

第一个问题：

title = data1.map((item) => {item.title})

我做的第二个：

章节 = data2.chapters.map((item) => {item.chapter})

但它不起作用。我认为有些地方有语法错误。

谁能帮助我如何管理这些数据？谢谢。

【问题讨论】：

标签： arrays dictionary

【解决方案1】：

是的，你的语法有问题。

第一个案例 - title = data1.map((item) => {item.title}) 您已经用 {} 包装了 item.title，因此您应该添加 return。或省略 {}。例如：title = data1.map(item => item.title)

第二种情况 - {} 的问题相同，但您也应该使用 flatMap，因为您需要在结果中使用平面列表。如果您使用常规地图编写 - 您将不会得到想要的 ["chapter1", "chapter2"]。

另请参阅下面的详细示例。

const data1 = [
  { id: 1, code: 1, title: "title1" },
  { id: 2, code: 3, title: "title2" }
];
const data1_mapped = data1.map(d => d.title);
console.log(data1_mapped);

const data2 = [
  {
    id: 1,
    code: 1,
    title: "title1",
    chapters: [{ id: 1, chapter: "chapter1" }, { id: 2, chapter: "chapter2" }]
  },
  {
    id: 2,
    code: 2,
    title: "title2",
    chapters: [{ id: 1, chapter: "chapter22" }, { id: 2, chapter: "chapter32" }]
  }
];
const data2_mapped = data2.flatMap(d => d.chapters.map(c => c.chapter));
console.log(data2_mapped);

【讨论】：

感谢您的 cmets。是否可以在 setState 中这样写 this.setState({ data1: response1.data1,titles: this.state.data1.map((item)=> item.title), });

【解决方案2】：

您没有返回值。尝试像这样删除大括号...

title = data1.map((item) => item.title)

章节 = data2.chapters.map((item) => item.chapter)

有关此问题的更多信息，请参阅此内容： Meaning of curly braces in array.map()

【讨论】：

感谢您的 cmets。是否可以在 setState 中这样写 this.setState({ data1: response1.data1,titles: this.state.data1.map((item)=> item.title), });我做到了，但我通过 console.log(this.state.titles) 检查，数组是空的。
@Mosen 不要在 setState 中调用 state。相反，使用函数来访问以前的状态。另一种选择是在变量中获取 setState 之外所需的值。 stackoverflow.com/questions/51817798/…
是的，我做到了现在它完美运行！太感谢你了。