React JS filter功能按类型展示值时仅返回单个值问题咨询

• 直接修改原State：splice是会修改原数组的可变方法，直接调用this.state.buildings.splice()违反了React State不可直接修改的原则，会导致状态管理混乱。
• 循环内重复覆盖状态：每次匹配到符合条件的项时，都会先清空buildings数组，再把当前单个匹配项赋值给buildings，即便存在多个匹配项，后续的匹配项也会覆盖之前的状态，最终只会保留最后一个匹配到的结果。
• 异步setState合并机制：setState是异步更新的，循环内多次调用会被React合并，进一步加剧状态覆盖的问题。
• 缺少全量原始数据源：直接在存储展示数据的buildings State上做筛选修改，第一次筛选完成后全量数据就被覆盖，后续无法再执行其他类型的筛选操作。
• 方法使用与命名问题：map方法是用来生成新数组的，单纯遍历用forEach更合适；同时方法名存在拼写错误，filerBuilding应为filterBuilding，避免调用时出错。

首先调整State结构，单独存储全量原始数据，避免筛选时丢失基础数据：

// 初始化State示例
this.state = {
  originBuildings: [], // 存储全量建筑数据，仅在初始化/数据更新时修改，筛选时作为数据源
  buildings: [], // 存储当前展示的筛选后数据
  // 其他State项
}

// 拿到后端返回的全量建筑数据时，同时更新两个State字段
this.setState({
  originBuildings: res.data,
  buildings: res.data
})

修改筛选逻辑，先批量筛选所有符合条件的项，再一次性更新State：

filterBuilding(e) {
  const targetType = e.target.value
  // 从全量数据源中一次性筛选所有符合类型的项
  const filteredList = this.state.originBuildings.filter(item => item.buildingType === targetType)
  // 单次更新展示状态
  this.setState({
    buildings: filteredList
  })
}

如果需要重置筛选，直接把展示数据赋值为全量原始数据即可：

resetFilter() {
  this.setState({
    buildings: this.state.originBuildings
  })
}

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