Tengo la consulta graphQL con el siguiente esquema:
export const ALL_BOOKS = gql` query { allBooks { title published author { name born } id genres } }He pasado este resultado a un componente de reacción a través de accesorios. Estoy tratando de obtener los géneros de cada libro y almacenarlos en una matriz de una sola dimensión. Para mí, tiene mucho sentido escribir:
let genres = props.books.map(book => (...book.genres))¿Por qué este código no funciona? ¿Qué tiene de malo devolver un objeto con el operador de propagación y qué alternativa cree que funcionaría para devolver libros>libro>géneros>género en una sola matriz? Realmente quiero evitar la cosa anidada por bucle.
¡Gracias!
La estructura de entrada es así:
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', …}Tomado del registro de la consola
-- Con 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" ] }]
Prueba esto
let genres = props.books.map(book => ({...book.genres}))De su pregunta, parece que solo quiere devolver los géneros:
let genres = props.books.map(book => book.genres) Esto devolverá una matriz con los géneros extraídos de los books .
Edición posterior: su pregunta no estaba clara, pero probablemente desee obtener la lista completa de géneros de cada sublista de géneros Y eliminar los duplicados:
let genres = props.books.map(book => book.genres).flat().reduce((arr, elem) => { if(arr.indexOf(elem) === -1) { arr.push(elem); } return arr; }, []);