过滤对象数组

Question

我有这个对象

  [
        {
          "url": "https://recipes-gatsby-react.netlify.app/",
          "stack": [
            {
              "id": 1,
              "title": "GatsbyJs"
            },
            {
              "id": 2,
              "title": "React"
            },
            {
              "id": 3,
              "title": "GraphQl"
            }
          ],
          "description": "Progetto per la costruzione di un sito statico per l'inserimento di ricette . \nPer il database è stato utilizzato Contentful , mentre per la parte frontend le tecnologie utilizzate sono Gatsby , React , Graphql",
          "id": "Project_1",
          "featured": false,
          "title": "Gatsby recipes app"
        },
        {
          "url": "https://resort-react-mr.netlify.app",
          "stack": [
            {
              "id": 4,
              "title": "React"
            },
            {
              "id": 5,
              "title": "Contentful"
            }
          ],
          "description": "Semplice sito web realizzato interamente in react con l'utilizzo di componenti classe e context.js . \nLato server viene utilizzato contenful ",
          "id": "Project_2",
          "featured": false,
          "title": "react resort"
        },
        {
          "url": "https://color-generator-react-mr.netlify.app/",
          "stack": [
            {
              "id": 6,
              "title": "React"
            }
          ],
          "description": "Generatore di colori utilizzando interamente react . \nInserendo il valore esadecimale di un colore , è possibile ottenere le sfumature del colore selezionato . È possibile selezionare il valore della risposta per ottenere più sfumature di colore (più alto è il valore , meno sfumature otterremo ) .",
          "id": "Project_3",
          "featured": false,
          "title": "color generator"
        },
        {
          "url": "",
          "stack": [
            {
              "id": 7,
              "title": "React Native"
            },
            {
              "id": 8,
              "title": "Firebase"
            }
          ],
          "description": "App nativa realizzata interamente in react-native , con l'utilizzo di hooks e redux . \nPer il sistema di autenticazione e storage è stato utilizzato firebase . \nL'utente , una volta loggato nell'app , può inserire nuovi libri ed evidenziarli come letti / libri che stai leggendo . \nOgni libro ha possibilità di avere una foto personalizzata e un suo screen per vederne i dettagli .",
          "id": "Project_4",
          "featured": false,
          "title": "Book-Worm"
        },
        {
          "url": "",
          "stack": [
            {
              "id": 9,
              "title": "React Native"
            },
            {
              "id": 10,
              "title": "Firebase"
            },
            {
              "id": 11,
              "title": "Stripe"
            },
            {
              "id": 12,
              "title": "Google Api"
            }
          ],
          "description": "App per delivery realizzata utilizzando react native e firebase . \nL'utente , una volta loggato all'interno dell'app ha possibilità di ricercare la città da lui preferita e vedere i ristoranti nelle vicinanze di quella città (Utilizzate le api di google Geocode e placesNearby).\nL'utente ha possibilità di effettuare acquisti (in maniera statica ) utilizzando stripe e inserendo il numero di carta (solo in modalità test ) . \nL'utente ha possibilità di salvare i suoi ristoranti preferiti , aggiornare la sua immagine profilo e visualizzare la mappa dove vengono inditicati i ristoranti vicini a seconda della città .  \n",
          "id": "Project_5",
          "featured": false,
          "title": "Delivery App"
        },
        {
          "url": "https://cocktails-react-app-mr.netlify.app/",
          "stack": [
            {
              "id": 13,
              "title": "React"
            }
          ],
          "description": "Semplice web app realizzata in React , dove è possibile ricercare vari cocktails e vederne i dettagli per la preparazione",
          "id": "Project_6",
          "featured": false,
          "title": "Cocktails App"
        },
        {
          "url": "https://www.ideacasaitalia.it/index.php",
          "stack": [
            {
              "id": 14,
              "title": "Prestashop"
            }
          ],
          "description": "Sito di ecommerce realizzato mediante l'uso di prestashop .",
          "id": "Project_7",
          "featured": false,
          "title": "Idea Casa Italia"
        }
      ]

我想做的是基于单击按钮或下拉菜单的过滤器。各种键/下拉列表的值将代表我在对象中拥有的各种堆栈。单击特定堆栈时，我想仅向用户显示包含该特定堆栈的元素。现在用的是react和hook state，就是出不来。这是我写的没有成功的代码

const [proj, setProj] = useState(projects)
 
  const filter = e => {
    const newProj = projects.map(item => {
      const { stack } = item
      stack.filter(st => {
        return st.title.includes(e.target.value)
      })
    })
    
    console.log(newProj ) // it return undefined
    setProj(newProj)
  }
 
<button onClick={filter} value="firebase">
        Firebase
      </button>

在此先感谢任何可以帮助我的人，如果我的问题不清楚，我深表歉意。

Answer 1

我已经解决了

const filter = e => {
    const newProj = projects.filter(obj =>
      obj.stack.some(
        st => st.title.toLowerCase() === e.target.value.toLowerCase()
      )
    )
    setProj(newProj)
  }

过滤对象数组

Filter on array of obj

reactjs

gatsby