React中如何使用setState移除State内的嵌套筛选对象

首先你现有代码有两处基础语法问题，先修正才能正常运行：

1. state定义缺少赋值等号，且filters的结构写法错误：你用数组包裹键值对是非法语法，结合你访问this.state.filters[filter.parameterName]的逻辑，filters应该是按筛选类型存储的对象；同时你写的查找语句存在语法错误，三元运算符不能直接放在变量赋值的等号右侧当判断用。正确初始state结构参考：

this.state = {
  filters: {
    country: [
      {parameterName: 'country', value: 'England'},
      {parameterName: 'country', value: 'Greenland'}
    ]
  }
}

2. 查找逻辑用错了方法：find只会返回匹配到的第一个元素，没法直接生成删除目标项后的新数组，这类排除场景直接用filter即可，同时要遵守React的不可变数据原则，用函数式写法更新state避免状态过期：

removeFilter(filter) {
  this.setState(prevState => {
    const currentList = prevState.filters[filter.parameterName] || []
    // 过滤掉和待删除对象value匹配的项
    const newList = currentList.filter(item => item.value !== filter.value)
    return {
      filters: {
        ...prevState.filters,
        [filter.parameterName]: newList
      }
    }
  })
}

注意事项 #

• 绝对不要直接修改原state上的数组/对象，必须生成新的引用再传给setState，否则React无法正常检测到更新触发重渲染
• 如果某类筛选全部删除后不需要保留空数组，可以在返回state前加判断：当newList.length === 0时，构造新的filters对象删除对应key即可
• 如果你的筛选条件存在value重复的可能，可以给每个筛选项加唯一id，匹配id删除会更精准

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