Как отфильтровать состояние с помощью React-хуков?

Question

Я делаю api req при монтировании моего компонента:

  await fetch('/api/visited')
        .then((data) => data.json())
        .then((data) => setCountries(data.payload))

, затем я устанавливаю состояние для стран

, но когда я пытаюсь фильтровать это, оно переопределяет мое состояние и я теряю все данные. как я могу сохранить данные и сделать их копию?

pre hooks Я думаю, что использовал prevState

<input onChange={(e) => filterCountries(e)} />

const filterCountries = (e) => {
    setCountries(countries.filter((country) => country.name.includes(e.target.value)))
}

это то, что я пробовал, но это переопределяющее состояние, как я могу это исправить?

Я видел другие ответы на это высказывание «использовать исходное состояние», но это происходит из API, поэтому я не могу сделать это, если я не храню это отдельно, но тогда у меня будет 2 источника правды, и я не хочу этого

Answer 1

Похоже, вы переопределяете полезную нагрузку, полученную при вызове API. каждый раз, когда вы используете setCountries, вы устанавливаете значение new для переменной страны. что вы должны сделать, это извлечь отфильтрованные страны из переменной countries и использовать ее для отображения результата.

попробуйте ввести новое состояние для фильтра

const [filter, setFilter] = useState('');

Затем вы введете be

<input onChange={(e) => setFilter(e.target.value)} />

Теперь в тело вашего компонента добавьте новую переменную для отфильтрованных стран const FilterCountries = страны? country.filter ((country) => country.name.includes (filter))): []

и используйте filteredCountries в своем рендере