React状态数组重置异常：点击按钮后无法重置过滤数组

我正在构建一个筛选器（示意图如下），期望每次点击搜索时先重置状态，再基于重置后的状态执行筛选操作。但实际每次点击提交后数组会被过滤，第二次提交时始终无法完成状态重置，导致数组保持不变或根据二次筛选条件变为空。

相关代码片段 #

const initialState = [...properties];
const [location, setLocation] = useState('');
const [startDate, setStartDate] = useState(new Date());
const formattedDate = moment(`${startDate}`).format('MM/DD/YYYY');
const [price, setPrice] = useState('');
const [propertyType, setPropertyType] = useState('');
const [filteredProperties, setFilteredProperties] = useState(properties);

const resetState = () => {
  setFilteredProperties([...initialState]);
};

问题原因及解决方法 #

核心问题 #

initialState是组件初始化时创建的快照，若properties是动态更新的props，后续properties变化时initialState不会同步更新。更关键的是，你可能直接在已过滤的filteredProperties基础上二次筛选，而非基于原始数据源，导致第二次筛选时没有干净的初始数据可用。

修复步骤 #

1. 放弃依赖initialState存储原始数据：直接用properties作为筛选的原始数据源，避免初始化后原始数据被固化。
2. 重构筛选逻辑：每次点击搜索时，跳过“先重置再过滤”的步骤，直接基于properties重新执行全量筛选——从根源上避免状态污染。
3. 优化重置函数：若需恢复初始状态，直接将filteredProperties设为properties，同时清空筛选表单的输入值。

修改后的关键代码示例：

// 移除initialState，直接用props的properties作为原始数据源
const [location, setLocation] = useState('');
const [startDate, setStartDate] = useState(new Date());
const formattedDate = moment(`${startDate}`).format('MM/DD/YYYY');
const [price, setPrice] = useState('');
const [propertyType, setPropertyType] = useState('');
const [filteredProperties, setFilteredProperties] = useState(properties);

// 重置状态：恢复原始数据+清空表单
const resetState = () => {
  setFilteredProperties([...properties]);
  setLocation('');
  setStartDate(new Date());
  setPrice('');
  setPropertyType('');
};

// 搜索提交：基于原始数据重新筛选
const handleSearch = () => {
  let result = [...properties];
  
  // 按条件依次过滤（以下为示例逻辑，需匹配你的实际数据结构）
  if (location) {
    result = result.filter(p => p.location.includes(location));
  }
  if (price) {
    result = result.filter(p => p.price <= Number(price));
  }
  if (propertyType) {
    result = result.filter(p => p.type === propertyType);
  }
  // 日期筛选逻辑同理实现
  setFilteredProperties(result);
};

额外建议 #

• 永远避免在已过滤的状态数据基础上二次筛选，这种做法极易导致数据丢失或状态不同步。
• 若properties是异步获取的（比如API请求返回），需用useEffect监听其变化，及时更新初始筛选结果：

useEffect(() => {
  setFilteredProperties(properties);
}, [properties]);

内容的提问来源于stack exchange，提问作者Tilak Kumar