React中删除useState存储对象的key后无状态组件不更新如何解决

问题根源 #

React 只会在状态的引用发生变化时触发组件重渲染，你直接对原状态对象执行delete操作，对象本身的内存地址没有改变，React 判定状态未更新，所以不会触发重渲染。另外直接修改 useState 定义的状态本身也不符合 React 的状态使用规范。

解决方法 #

先创建原状态对象的副本，在副本上修改后再通过setDescription提交新状态即可，两种常用写法如下：

写法1：浅拷贝后删除属性 #

const remove = (key) => {
  // 创建原对象的浅拷贝
  const newDesc = {...description}
  // 操作拷贝对象
  delete newDesc[key]
  // 提交新状态
  setDescription(newDesc)
}

写法2：解构过滤（无需显式delete） #

const remove = (key) => {
  // 解构过滤掉要删除的key，剩下的属性存到rest对象中
  const { [key]: _, ...rest } = description
  setDescription(rest)
}

两种写法都会生成新的对象引用，React 可以正常检测到状态变更，触发组件重渲染。

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