React中如何通过回调删除state指定id项？子组件能否更新父组件filters状态？

问题1：能否在子组件中更新父组件的state（filters）？ #

完全可以，你给出的代码就是标准的实现方式——把父组件的状态更新函数setFilters作为props传递给子组件，这是React中父子组件状态交互的常规做法。

需要注意两个细节：

• 父组件里的useState最好设置初始值，比如useState({})，避免初始渲染时filters为undefined，导致拷贝操作出错：

  const ParentComponent = () => {
    const [filters, setFilters] = useState({}) // 初始化空对象
    return (<ChildrenComponent filters={filters} setFilters={setFilters} />)
  }
  

• 子组件中通过拷贝原对象再修改的方式，符合React的状态不可变原则，能避免直接修改原state引发的渲染异常。

问题2：是否有办法通过回调获取prev state来删除指定id的项？ #

当然可以，而且这种方式更可靠——当新状态依赖旧状态时，使用函数式更新（传入回调获取prev state）能规避状态异步更新导致的错误。

你给出的写法存在语法错误，正确实现需要遵循状态不可变原则（不能直接修改prev），要创建新对象并排除指定id的属性，示例如下：

setFilters(prevFilters => {
  // 方式1：展开运算符+删除属性
  const newFilters = { ...prevFilters }
  delete newFilters[id]
  return newFilters

  // 方式2：用Object.fromEntries过滤，更简洁
  // return Object.fromEntries(
  //   Object.entries(prevFilters).filter(([key]) => key !== String(id))
  // )
})

两种写法都能确保React正确捕获状态变化，触发组件重渲染。

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