Javascript React Return Spread 運算符不工作

Question

我有具有以下架構的 graphQL 查詢：

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

我已通過道具將此結果傳遞給反應組件。 我正在嘗試獲取每本書的類型並將其存儲在一個單一維度的數組中。 對我來說，這樣寫很有意義：

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

為什么這段代碼不起作用？ 使用展開運算符返回 object 有什么問題，您認為有什么替代方法可以將 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": "Justin Garzione",
    "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"
  ]
}

]

Answer 1

嘗試這個

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

Answer 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;

}, []);

Answer 3

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

或者您可以使用reduce方法來累積結果。