遇到了麻烦的情况 我有一个对象数组
[
{
"title":"placeholder",
"text":"placeholder"
},
{
"title":"test",
"text":"placeholder"
},
{
"title":"javascript",
"text":"placeholder"
}
]
我正在div中显示它们,但这并不重要 我得到了一个输入字段,用户应在标题字段中输入内容,输入时,数组应仅显示匹配的对象。 输入Java将显示以javascript为标题的对象
我需要以某种方式更改数组,以便除了输入的标题外不显示任何内容,如果输入为空则显示整个数组
我正在使用React但我只能使用钩子 所以我复制了json
var [arrayOfObjects, setArray] = useState(Json)
Json是从本地文件导入的 arrayOfNotes是我需要更改的数组 指出,这样更容易理解
提前预订
答案 0 :(得分:4)
您正在寻找array filter方法。
这是您的组件的外观。
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} />
答案 1 :(得分:0)
您没有共享您的组件,所以我假设您知道如何获取输入值并调用相应的变量input
,除了您拥有原始数组之外,根据您的示例,我将其称为{ {1}}。
然后,您可以按以下步骤过滤值:
Json
这样以后您就可以按如下所示渲染const [arrayOfObjects, setArray] = useState(Json);
const filteredArray = input ?
originalArray.filter(item => item.title.includes(input) :
originalArray;
了:
filteredArray