在 React Native 中异步过滤和渲染数组的问题
[英]Problem filtering and rendering an array asynchronously in React native
问题描述
I'm trying to apply a filter in one array of objects with the property Id to get the list of items that starts with the text from an input.
我正在尝试在一个具有属性Id的对象数组中应用过滤器，以获取以输入文本开头的项目列表。 I have only two elements in the array but if I ever get the same two elements (render as a list).我在数组中只有两个元素，但如果我得到相同的两个元素（呈现为列表）。
What i need to do for fix the filter logic in function SearchFilter ?我需要做什么来修复 function 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>
)
}
3 个解决方案
解决方案1
0 2021-11-26 22:11:04
You don't need to use async/await on the filter.您不需要在过滤器上使用 async/await。 It's not async.它不是异步的。 Also, since itemsFiltered is deterministic (based on sessionsCata state), it shouldn't be its own state.此外，由于 itemsFiltered 是确定性的（基于 sessionCata 状态），它不应该是它自己的 state。
const [prefix, setPrefix] = useState("");
const itemsFiltered = sessionsCata.filter(x => x.Id.startsWith(prefix));
// Then
<Input onChangeText={setPrefix} />
解决方案2
0 2021-11-27 03:22:04
Change:改变：
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)
}
}
解决方案3
0 2021-11-27 17:39:33
Finally i get it.最后我明白了。 The error was the property Id -> id.错误是属性 ID -> id。
And i quit async from the filter, put validation in params.我从过滤器中退出异步，将验证放在参数中。
async function SearchFilter(params:string) {
setShowSpinner(true)
await Sleep(500)
setShowSpinner(false)
if(sessionsCata && sessionsCata.length>0 && params.length>0){
let result = sessionsCata.filter( x=> x.id.startsWith(params) )
if(result)
setItemsFiltered(result)
}
}
Change input:更改输入：
<Input placeholder='Id...' onChangeText={ (text) => SearchFilter(text)} />
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.