Блог

Я пытаюсь отфильтровать этот массив при изменении входного «фильтра», но когда я пытаюсь ввести, он хорошо фильтрует, но переопределяет исходный список. Итак, как я могу отфильтровать список при вводе и вернуться к исходному списку при удалении значения фильтра?

 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>
)
  

Вы должны быть в состоянии достичь желаемого, отфильтровав свои результаты как часть рендеринга. Вы обновляете свое filter состояние, поэтому повторный рендеринг должен запускаться, как и ожидалось, при событии:

РЕДАКТИРОВАТЬ: я вижу, что вы обновили свой вопрос своим кодом рендеринга. Вы должны иметь возможность просто применить filter функцию к тому, что у вас уже есть:

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

Вы должны поддерживать дополнительное состояние для отфильтрованных значений.

Просто используй другой 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} />)