我有这个目标
[
{
"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状态，但我无法摆脱它。这是我写的没有成功的代码
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>
提前感谢任何能帮助我的人，如果我的问题不清楚，我道歉。
我已经用这个解决了问题
const filter = e => {
const newProj = projects.filter(obj =>
obj.stack.some(
st => st.title.toLowerCase() === e.target.value.toLowerCase()
)
)
setProj(newProj)
}