我正在嘗試在具有該屬性的一組物件中應用過濾器，Id以獲取以輸入文本開頭的專案串列。我在陣列中只有兩個元素，但是如果我得到相同的兩個元素（呈現為串列）。
我需要做什么來修復函式中的過濾器邏輯SearchFilter？
import React, { useEffect, useState } from "react"
import {useSelector} from 'react-redux'
import {View, Item, Text, Icon, Input, List, ListItem, Left, Thumbnail, Spinner} from 'native-base'
const SearchModal =(props:any)=>{
const sessionsCata = useSelector((state)=> state.sessionsCata.sessions)
const [itemsFiltered, setItemsFiltered] = useState([])
const [showSpinner, setShowSpinner] =useState(false)
//filter the array objects
async function SearchFilter(params:string) {
setShowSpinner(true)
if(sessionsCata && sessionsCata.length>0){
let result = await sessionsCata.filter(async x=> x.Id.startsWith(params) )
if(result)
setItemsFiltered(result)
}
await Sleep(500) //function with Promise-setTimeout
setShowSpinner(false)
}
return(
<View style={StylesSearch.containerBar} >
<Item rounded style={StylesSearch.searchBar}>
<Input placeholder='Id...' onChangeText={async (text) => await SearchFilter(text)} />
</Item>
</View>
<View>
{ showSpinner ? <Spinner color='grey'/> :
itemsFiltered && itemsFiltered.length>0 ? (
<List>
{
itemsFiltered.map(item=>(
<ListItem avatar key={item.id}>
<Body>
<Text>{item.id}</Text>
</Body>
</ListItem>
))
}
</List>
): <Text>Not items filtered...</Text>
}
</View>
)
}
uj5u.com熱心網友回復：
您不需要在過濾器上使用 async/await。這不是異步的。此外，由于 itemsFiltered 是確定性的（基于 sessionCata 狀態），它不應該是它自己的狀態。
const [prefix, setPrefix] = useState("");
const itemsFiltered = sessionsCata.filter(x => x.Id.startsWith(prefix));
// Then
<Input onChangeText={setPrefix} />
uj5u.com熱心網友回復：
改變 ：
if(sessionsCata && sessionsCata.length>0){
let result = await sessionsCata.filter(async x=> x.Id.startsWith(params) )
if(result)
{
if(JSON.stringify(itemsFiltered).includes(JSON.stringify(result)))
return;
setItemsFiltered(result)
}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/367191.html
標籤：javascript 反应原生 异步 筛选