React中setState用变量：为何targetProperty无法重置为初始值？

嘿，我来帮你拆解下这个问题～

你遇到的核心问题是引用类型的浅比较机制在搞鬼：

为什么重置没生效？ #

initialProperty是一个对象，属于JavaScript里的引用类型。当你在组件构造函数里把this.state.targetProperty赋值为initialProperty时，这两个变量其实指向的是同一个内存地址里的对象。

之后当你修改targetProperty的属性时（比如通过setState更新它的name或id），本质上是在修改这个共享的对象本身。等到你点击按钮执行this.setState({targetProperty: initialProperty})时，你只是把targetProperty重新指向了那个已经被修改过的同一个对象引用。

React更新state时会做浅比较——它发现targetProperty的引用地址没有变化，就会判定state没有发生实质更新，因此不会触发组件重新渲染，看起来就像重置操作没生效一样。

怎么解决？ #

你需要每次重置时创建一个新的对象副本，而不是复用同一个引用，这样React就能检测到state变化了。这里有几种简单的实现方式：

方式1：使用对象展开运算符（推荐，语法简洁）

somethingHappensOnClick = () => {
  this.setState({ targetProperty: { ...initialProperty } })
}

方式2：使用Object.assign

somethingHappensOnClick = () => {
  this.setState({ targetProperty: Object.assign({}, initialProperty) })
}

方式3：封装成函数生成新对象（避免initialProperty被意外修改）

如果担心initialProperty在其他地方被意外修改，可以把它写成一个返回新对象的函数，每次调用都生成干净的初始值：

// 定义生成初始属性的函数
const getInitialProperty = () => ({ name: '', id: 0, type: '' })

class Example extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      otherProperty: '',
      targetProperty: getInitialProperty() // 初始化调用函数生成新对象
    }
  }

  somethingHappensOnClick = () => {
    this.setState({ targetProperty: getInitialProperty() }) // 重置时再次调用生成新对象
  }
}

这样修改后，每次重置都会生成一个全新的对象，React能检测到state的变化，组件就会正确更新啦～

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