React Native异步过滤渲染数组时SearchFilter筛选逻辑异常如何修复？

核心问题 #

• 误用异步语法处理同步的filter方法：Array.filter为同步遍历方法，给筛选回调添加async关键字后，所有回调返回的都是Promise对象，而Promise在布尔判断中恒为真值，因此filter会保留数组的全部元素，导致筛选完全失效。同时filter本身不是异步函数，在其前加await没有任何作用。
• 属性名大小写不统一：筛选逻辑中读取的是大写开头的x.Id，渲染列表时读取的是小写开头的item.id，如果数据的属性名不匹配，会导致取值异常。

修复代码 #

修正筛选函数和调用逻辑 #

// 先统一属性名规则，确认你的数据中id是大写还是小写，两端保持一致即可
async function SearchFilter(params:string) {
  setShowSpinner(true)
  if(sessionsCata?.length > 0){
    // 移除filter相关的异步语法
    const result = sessionsCata.filter(x => x.Id.startsWith(params))
    setItemsFiltered(result)
  }            
  await Sleep(500)
  setShowSpinner(false)
}

// 输入框调用处去掉不必要的async/await
<Input placeholder='Id...' onChangeText={(text) => SearchFilter(text)} />

修正渲染部分的属性名 #

<ListItem avatar key={item.Id}>
  <Body>
    <Text>{item.Id}</Text>
  </Body>
</ListItem>

可选优化（防抖） #

如果要避免输入过程中频繁触发筛选，可替换原有逻辑，无需单独的Sleep函数：

import { useRef } from 'react'

const SearchModal =(props:any)=>{
  const sessionsCata = useSelector((state)=> state.sessionsCata.sessions)
  const [itemsFiltered, setItemsFiltered] = useState([]) 
  const [showSpinner, setShowSpinner] = useState(false)
  // 声明定时器ref存储防抖id
  const timerRef = useRef<NodeJS.Timeout|null>(null)

  function SearchFilter(params:string) {
    // 清空前一次未执行的筛选
    if(timerRef.current) clearTimeout(timerRef.current)
    setShowSpinner(true)

    timerRef.current = setTimeout(() => {
      if(sessionsCata?.length > 0){
        const result = sessionsCata.filter(x => x.Id.startsWith(params))
        setItemsFiltered(result)
      }
      setShowSpinner(false)
    }, 500)
  }
  // 其余逻辑保持不变
}

内容的提问来源于stack exchange，提问作者Dr oscar