![](/img/trans.png)
[英]How to fetch data without useEffect hooks in React function component?
[英]How to reset data in UseEffect React Hooks before each rendering?
這是情況。 我使用useEffect
過濾一些數據,它運行良好。 這是代碼和代碼框。
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
都會更改。 但是沒有辦法讓 go 回來。
例如,我選擇了兩個復選框,結果將是:
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);
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.