在一个非常麻烦的情况下，我有一系列对象
[
{
"title":"placeholder",
"text":"placeholder"
},
{
"title":"test",
"text":"placeholder"
},
{
"title":"javascript",
"text":"placeholder"
}
]
我在div中显示它们，但这并不重要，我得到了一个输入字段，用户应在标题字段中键入，并且在键入时，数组应仅显示匹配的对象。输入Java将显示javascript标题对象
我需要以某种方式更改数组，以便除输入的标题外不显示任何内容，如果输入为空，则显示整个数组
我正在使用React但我只能使用钩子所以我复制了json
var [arrayOfObjects, setArray] = useState(Json)
Json是从本地文件中导入的arrayOfNotes是我需要更改指出的数组，因此更易于理解
提前ty
该滤镜阵列的方法是你要寻找的。
这是您的组件的外观。
const List = ({ data }) => {
const [value, setValue] = useState('')
return (
<div>
<input
type="text"
value={value}
onChange={e => setValue(e.target.value)}
/>
{data
.filter(item => {
if (!value) return true
if (item.title.includes(value) || item.text.includes(value)) {
return true
}
})
.map(item => (
<div>
<h1>{item.title}</h1>
<p>{item.text}</p>
</div>
))
}
</div>
)
}
然后将json数据传递给该组件
<List data={Json} />
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句