Javascript React返回传播运算符不起作用答案

【问题标题】：Javascript React Return Spread Operator Not WorkingJavascript React返回传播运算符不起作用
【发布时间】：2022-01-17 22:55:05
【问题描述】：

我的 graphQL 查询具有以下架构：

export const ALL_BOOKS = gql`
  query {
    allBooks {
      title
      published
      author {
        name
        born
      }
      id
      genres
    }
  }

我已通过 props 将此结果传递给反应组件。我正在尝试获取每本书的类型并将其存储在一个单一维度的数组中。对我来说，这样写很有意义：

let genres = props.books.map(book => (...book.genres))

为什么这段代码不起作用？使用扩展运算符返回对象有什么问题，以及您认为将 book>book>genres>genre 返回到单个数组中的替代方法是什么。我真的很想避免嵌套循环的事情。

谢谢！

输入结构是这样的：

0: {__typename: 'Book', title: 'Book1', published: 2022, author: 
{…}, id: '61d5e02beef9d5fcdb5ce26b', …}
1: {__typename: 'Book', title: 'Book2', published: 2022, author: 
{…}, id: '61d5e061eef9d5fcdb5ce270', …}
2: {__typename: 'Book', title: 'Book3', published: 2022, author: 
{…}, id: '61d5e07a3473e9ac212f87dc', …}

取自控制台日志

-- 使用 Stringfy

[
{
  "__typename": "Book",
  "title": "The Key of Solomon",
  "published": 2022,
  "author": {
    "__typename": "Author",
    "name": "Steve Jobs",
    "born": 1999
  },
  "id": "61d5e02beef9d5fcdb5ce26b",
  "genres": [
    "Philosophy",
    "Witchcraft"
  ]
},
{
  "__typename": "Book",
  "title": "The Steez of Solomon",
  "published": 2022,
  "author": {
    "__typename": "Author",
    "name": "Horace Gumdrop",
    "born": 1998
  },
  "id": "61d5e061eef9d5fcdb5ce270",
  "genres": [
    "Philosophy",
    "Steezcraft"
  ]
  },
{
  "__typename": "Book",
  "title": "The Steep",
  "published": 2022,
  "author": {
    "__typename": "Author",
    "name": "Bulhar",
    "born": null
  },
  "id": "61d5e07a3473e9ac212f87dc",
  "genres": [
    "Philosophy",
    "Steezcraft"
  ]
}

]

【问题讨论】：

...book.genres 应该将它传播到到的什么？你只是想要props.books.map(({ genres }) => genres)（将书的类型out解构，而不是试图将其放入某些东西中）？
你没有返回一个对象，那就是book => ({ ...book.genres })。
你可以发布示例输入吗？（还要注意graphQL和React完全不相关，这个问题只是关于从数组A中提取数组B）
分享您的大部分代码片段，以更好地了解您的目的
需要返回维度 1 数组中每一本书的类型：[genre1Book1,genre2Book1,genre1Book2,...etc]

标签： javascript reactjs graphql apollo apollo-client

【解决方案1】：

试试这个

let genres = props.books.map(book => ({...book.genres}))

【讨论】：

【解决方案2】：

从您的问题来看，您似乎只想返回流派：

let genres = props.books.map(book => book.genres)

这将返回一个数组，其中包含从 books 属性中提取的流派

稍后编辑：您的问题不清楚，但可能您想从每个流派子列表中获取整个流派列表并删除重复项：

let genres = props.books.map(book => book.genres).flat().reduce((arr, elem) => {
    if(arr.indexOf(elem) === -1) {
       arr.push(elem);
    }  

    return arr;

}, []);

【讨论】：

关于一维回归的问题很清楚

【解决方案3】：

好吧，你需要在.map(...)之后添加.flat()。

或者你可以使用reduce方法来累积结果。

【讨论】：