React Native搜索栏清除输入后数据无法恢复正常问题求助

核心问题 #

你大概率是在筛选过程中直接覆盖了原始数据源，没有保留一份初始的全量数据副本，导致删除输入后没有完整数据可以恢复。

具体修复步骤 #

• 维护两个状态变量：一个存储原始全量数据（比如originalData），仅在初始化数据时赋值，后续不再修改；另一个存储筛选后的数据（比如filteredData），用于列表渲染。
• 筛选逻辑始终基于originalData执行，而非filteredData。这样不管搜索文本怎么变化，都是从完整的原始数据重新过滤，清空输入时就能直接恢复全部内容。
• 当搜索输入为空时，直接将filteredData重置为originalData。

示例代码 #

import { useState, useEffect } from 'react';
import { TextInput, FlatList, Text, View } from 'react-native';

const SearchScreen = () => {
  // 存储原始全量数据，仅初始化时更新
  const [originalData, setOriginalData] = useState([]);
  // 存储筛选后的数据，用于渲染
  const [filteredData, setFilteredData] = useState([]);
  const [searchText, setSearchText] = useState('');

  // 模拟数据获取（替换成你的实际接口逻辑）
  useEffect(() => {
    const loadData = async () => {
      const rawData = await yourDataFetchFunction();
      setOriginalData(rawData);
      setFilteredData(rawData); // 初始显示全部数据
    };
    loadData();
  }, []);

  // 监听搜索文本变化，执行筛选
  useEffect(() => {
    if (!searchText.trim()) {
      setFilteredData(originalData);
      return;
    }
    // 基于原始数据过滤，避免数据源被截断
    const matchedItems = originalData.filter(item => 
      item.name.toLowerCase().includes(searchText.toLowerCase())
    );
    setFilteredData(matchedItems);
  }, [searchText, originalData]);

  return (
    <View style={{ padding: 16 }}>
      <TextInput
        value={searchText}
        onChangeText={setSearchText}
        placeholder="输入关键词搜索"
        style={{ borderWidth: 1, borderColor: '#ccc', padding: 8, borderRadius: 4, marginBottom: 16 }}
      />
      <FlatList
        data={filteredData}
        keyExtractor={item => item.id.toString()}
        renderItem={({ item }) => (
          <Text style={{ padding: 12, borderBottomWidth: 1, borderBottomColor: '#eee' }}>
            {item.name}
          </Text>
        )}
      />
    </View>
  );
};

export default SearchScreen;

额外排查点 #

• 检查代码中是否存在直接修改原始数据的操作（比如把filter结果赋值给原始数据状态），这种操作会导致原始数据被永久截断。
• 确认原始数据是否存储在useState中：如果存在普通变量里，组件重新渲染时会丢失原始数据，无法恢复。

内容的提问来源于stack exchange，提问作者Ch Ikram