在不重写的情况下筛选数组

Question

我正在尝试在更改输入时筛选此数组"过滤器"；但当我尝试键入它时，它过滤得很好，但覆盖了原始列表。那么，我如何在键入时过滤列表，并在擦除过滤值时返回到原始列表呢？

const [persons, setPersons] = useState([
{ name: 'Arto Hellas', number: '040-123456' },
{ name: 'Ada Lovelace', number: '39-44-5323523' },
{ name: 'Dan Abramov', number: '12-43-234345' },
{ name: 'Mary Poppendieck', number: '39-23-6423122' }
])
const [filter, setFilter] = useState('')
const handleFilter = e => {
setFilter(e.target.value)
const personsFiltered = persons.filter(({ name }) => name.includes(filter))
if (personsFiltered.length > 0)
setPersons(personsFiltered)
}
return (
<div>
<input value={filter} onChange={handleFilter} />
{persons.map((person, index) => <p key={index}>{person.name} {person.number}</p>)}
</div>
)

Answer 1

您应该能够通过将结果作为渲染的一部分进行过滤来实现您想要的结果。您正在更新filter状态，因此重新渲染应按预期触发事件：

编辑：我看到您用渲染代码更新了您的问题。您应该能够将filter函数应用于您已经拥有的内容：

{persons.filter(({ name }) => name.includes(filter)).map((person, index) => <p key={index}>{person.name} {person.number}</p>)}

Answer 2

您必须维护过滤值的附加状态。

只需使用另一个useState

const [persons, setPersons] = useState([
{ name: 'Arto Hellas', number: '040-123456' },
{ name: 'Ada Lovelace', number: '39-44-5323523' },
{ name: 'Dan Abramov', number: '12-43-234345' },
{ name: 'Mary Poppendieck', number: '39-23-6423122' }
])
// use additional state here
const [personsFiltered, setPersonsFiltered] = useState(persons);
const [filter, setFilter] = useState('')
const handleFilter = e => {
setFilter(e.target.value)
const personsFiltered = persons.filter(({ name }) => name.includes(filter))
if (personsFiltered.length > 0)
// set the additional state here
setPersonsFiltered(personsFiltered)
}
return(<input value={filter} onChange={handleFilter} />)