如何在每次渲染前重置 UseEffect React Hooks 中的数据?
How to reset data in UseEffect React Hooks before each rendering?
情况是这样的。
我使用 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>
)
}
每次更改搜索关键字或复选框时,result
都会更改。却无路可退
例如,我选中了两个复选框,结果将是:
asr -> 20
plo -> 30
现在我输入 a
,结果变成
asr -> 20
问题是,当我删除 a
时,我想要的结果是
asr -> 20
plo -> 30
我知道 result
被删减了,但我怎样才能做到这一点?
我认为它应该搜索是否有任何过滤器(复选框和关键字)已被更改为原始数据。
所以我在 useEffect
钩子的最开始就尝试了这个。
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);
情况是这样的。
我使用 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>
)
}
每次更改搜索关键字或复选框时,result
都会更改。却无路可退
例如,我选中了两个复选框,结果将是:
asr -> 20
plo -> 30
现在我输入 a
,结果变成
asr -> 20
问题是,当我删除 a
时,我想要的结果是
asr -> 20
plo -> 30
我知道 result
被删减了,但我怎样才能做到这一点?
我认为它应该搜索是否有任何过滤器(复选框和关键字)已被更改为原始数据。
所以我在 useEffect
钩子的最开始就尝试了这个。
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);