时间戳

首页 > 解决方案 > 如何使用 React 钩子过滤状态？

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

问题描述

我在安装组件时创建了一个 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，所以我不能这样做，除非我单独存储它，但我将有 2 个事实来源，我不想要那个

标签： javascriptreactjsreact-hooks

解决方案

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

尝试为过滤器引入新状态

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

然后你输入将是

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

现在在您的组件正文中为过滤后的国家/地区添加一个新变量 const filtersCountries = countries ? country.filter((country) => country.name.includes(filter))) : []

并filteredCountries在您的渲染中使用

推荐阅读