React Native基于Redux State实现实时搜索筛选UI不更新如何解决

• Array.filter() 本身是纯函数，不会修改原数组，只会返回过滤后的新数组，你原代码没有接收这个返回值，原始的companies（来自Redux的只读数据）根本没有发生变化，你观测到的控制台数据变化属于误判。
• Redux通过useSelector返回的状态是只读的，直接修改不会触发组件重渲染，React组件UI更新依赖state/props的变更触发。

不需要修改Redux源数据，新增本地状态存储搜索关键词，渲染时动态过滤数据即可，清空搜索词时会自动恢复全量列表，修改后的代码如下：

import { useState } from 'react';
const Home = (props) => {
  // 从Redux取原始全量数据，始终不修改它
  const originalCompanies = useSelector(state => state.companies.availableCompanies);
  // 新增本地状态存搜索关键词
  const [searchKeyword, setSearchKeyword] = useState('');

  const handleSearch = (e) => {
    // 只更新搜索关键词，触发组件重渲染
    setSearchKeyword(e);
  }

  // 渲染前动态过滤数据
  const showCompanies = searchKeyword.trim() === '' 
    ? originalCompanies 
    : originalCompanies.filter(el => el.name.includes(searchKeyword));
  // 优化点：如果要实现不区分大小写搜索，可以改成下面的写法
  // : originalCompanies.filter(el => el.name.toLowerCase().includes(searchKeyword.toLowerCase()));

  return (
      <>
        <SearchBar onChangeText={handleSearch} value={searchKeyword} />
        <View style={styles.cardContainer}>
          {showCompanies.map((el, index) => {
            return (
             <Card
              key={el.id}
              companyId={el.id}
              companyName={el.name}
              companyImage={el.image}
              companyMainAddress={el.mainAddress}
              companyPhoneNumber={el.telephoneNumber}
              companyDetails={el.details}
              onPress={() => {
                navigation.navigate('CardDetails', {
                id: el.id,
                companyName: el.name,
               });
             }}
            />
           )
         })}
       </View>
      </>
  )
}

如果你的搜索功能需要跨页面共享状态，才需要把搜索关键词存入Redux，否则本地状态完全够用，性能也更好。

内容的提问来源于stack exchange，提问作者Ash Archin