如何使用React钩子过滤状态

Question

我在安装我的组件时制作了一个api req:

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

然后我把国家设置为

但当我尝试对此进行过滤时，它会覆盖我的状态，并丢失所有数据。如何保留数据并进行复制？

预挂钩我想我用了prevState

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

这是我尝试过的，但它是压倒一切的状态，我该如何解决？

我已经看到了关于"使用原始状态"这句话的其他答案，但它来自一个api，所以我不能这样做，除非我单独存储它，但我有两个真相来源，我不想要

Answer 1

看起来您正在覆盖从API调用获得的有效负载。每次使用setCountries时，都会为countries变量设置新的值。您应该做的是从countries变量中导出过滤后的国家/地区，并将其用于显示结果。

尝试为过滤器引入一个新状态

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

然后你的输入将是

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

现在，在您的组件主体中为筛选的国家/地区添加一个新变量const filteredCountries=国家？countries.filter((country(=>country.name.includs(filter((：[]

并在渲染中使用filteredCountries