gpt4 book ai didi

javascript - 如何在每次渲染之前重置 UseEffect React Hooks 中的数据?

转载 作者:行者123 更新时间:2023-12-03 08:52:07 29 4
gpt4 key购买 nike

情况是这样的。我使用 useEffect 来过滤一些数据,效果很好。这是代码和 codesandbox .

const data = [
{name: 'aml', age: 10},
{name: 'abcb', age: 12},
{name: 'asr', age: 20},
{name: 'plo', age: 30},
{name: 'bvcq', age: 15},
{name: 'bfro', age: 21},
{name: 'zxwh', age: 19}
]

function App() {
const [keyword, setKeyword] = React.useState('')
const [result, setResult] = React.useState(data)
const [isAged, setIsAged] = React.useState(false)
const [isNameLength3, setIsNameLength3] = React.useState(false)
React.useEffect(() => {
const doSearch = () => {
// setResult(data)
if (isAged) {
setResult(result.filter(item => item.age >= 20))
}
if (isNameLength3) {
setResult(result.filter(item => item.name.length === 3))
}
if (keyword) {
setResult(result.filter(item => item.name.toLowerCase().includes(keyword.toLowerCase())))
}
}
doSearch()
}, [isAged, keyword, isNameLength3, result])
return (
<div className="App">
<input
value={keyword}
type='text'
onChange={(e) => setKeyword(e.currentTarget.value)}
placeholder='search...' />
<br/>
<label>
<input
onChange={() => setIsAged(!isAged)}
type='checkbox'
checked={isAged} />
<span>Age >= 20</span>
</label>
<label>
<input
onChange={() => setIsNameLength3(!isNameLength3)}
type='checkbox'
checked={isNameLength3} />
<span>NameLength3</span>
</label>
<div className="result">
{
result && result.length > 0 &&
result.map((item, index) =>
<p key={'result' + index}>{item.name} -> {item.age}</p>
)
}
</div>
</div>
)
}

每次更改搜索关键字或复选框时,结果都会更改。但已经没有办法回去了。

例如,我选中了两个复选框,结果将是:

asr -> 20

plo -> 30

现在我输入a,结果变成

asr -> 20

问题是,当我删除a时,我想要一个结果

asr -> 20

plo -> 30

我知道结果正在被剪切,但我怎样才能实现这一点?

我认为它应该搜索是否有任何过滤器(复选框和关键字)已被原始数据更改。

所以我在 useEffect Hook 的一开始就尝试了这个。

setResult(data)

但不幸的是,它没有按我的预期工作。

感谢任何帮助!

最佳答案

首先对完整数据运行过滤器。

仅使用三个过滤规则过滤后的数据设置结果。

let filteredResult = data.filter(
item =>
(!isAged || item.age >= 20) &&
(!isNameLength3 || item.name.length === 3) &&
(!keyword || item.name.toLowerCase().includes(keyword.toLowerCase()))
);

setResult(filteredResult);

See working sandbox

关于javascript - 如何在每次渲染之前重置 UseEffect React Hooks 中的数据?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58162642/

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com