Question

我在安装组件时提出了一个api请求：

  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的，所以除非我单独存储它，否则我将无法做到这一点，但是我将有2个事实来源，并且我不希望这样做< / p>

Answer 1

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

尝试为过滤器引入新状态

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

那么您输入的将是

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

现在在组件主体中为过滤后的国家/地区添加新变量 const filterCountries =国家？ country.filter（（country）=> country.name.includes（filter）））：[]

并在渲染中使用filteredCountries

如何使用React钩子过滤状态？

1 个答案: