Javascript 为什么React中的SetState会更新处理程序中的其他对象？

在onChange事件处理程序中，我仅对userTxt进行setState（）调用，但它看起来还设置了color对象的状态。奇怪的是，这只发生在颜色对象上，而不发生在年龄变量上

我想知道是否有人能解释为什么会发生这种情况

我希望有人能向我解释为什么会发生这种情况。事先非常感谢

import React, { Component } from 'react';

export default class Hello extends Component {

  constructor() {
    super();
    this.handleMe = this.handleMe.bind(this);
    this.state = {
        age: 21,
        colors: {
            best: 'blue',
            second: 'green'
        },
        userTxt: ""
    }
  }
  handleMe(e) {
        let myAge = this.state.age;
        let myColors = this.state.colors;

        myAge = myAge + 1;
        myColors['best'] = 'mistyrose';
        myColors['second'] = 'red';

        this.setState({ userTxt: e.target.value });
    }

  render() {
    const { age, colors, userTxt} = this.state;
    return (
      <div>
        <form action="">
          <input type="text"onChange={this.handleMe}/>
          <div>Age: {age}</div>
          <div>Colors - best: {colors.best}</div>
          <div>Colors - second: {colors.second}</div>
          <div>UserTxt: {userTxt}</div>
        </form>
      </div>
    )
  }
}[enter link description here][1]


  [1]: https://www.webpackbin.com/bins/-KvFx-s7PpQMxLH0kg7m

import React，{Component}来自'React'；
导出默认类Hello扩展组件{
构造函数（）{
超级（）；
this.handleMe=this.handleMe.bind（this）；
此.state={
年龄:21岁，
颜色：{
最佳：“蓝色”，
第二：“绿色”
},
userTxt:“
}
}
handleMe（e）{
让myAge=this.state.age；
让myColors=this.state.colors；
我的年龄=我的年龄+1；
myColors['best']='mistyrose'；
myColors['second']='red'；
this.setState（{userTxt:e.target.value}）；
}
render（）{
const{age，colors，userTxt}=this.state；
返回(
年龄：{Age}
颜色-最佳：{Colors.best}
颜色-秒：{Colors.second}
UserTxt:{UserTxt}
)
}
}[在此处输入链接说明][1]
[1]: https://www.webpackbin.com/bins/-KvFx-s7PpQMxLH0kg7m

之所以发生这种情况，是因为您直接在这里操纵状态。myColors是指该州的颜色对象

  handleMe(e) {
        let myAge = this.state.age;
        let myColors = this.state.colors;

        myAge = myAge + 1;
        //directly mutating the state with these 2 lines.
        myColors['best'] = 'mistyrose';
        myColors['second'] = 'red';

        this.setState({ userTxt: e.target.value });
    }

---

您需要创建this.state.colors的副本，比如让myColors=Object.assign（{}，this.state.colors）

发生这种情况是因为您直接在这里操作状态。myColors是指该州的颜色对象

  handleMe(e) {
        let myAge = this.state.age;
        let myColors = this.state.colors;

        myAge = myAge + 1;
        //directly mutating the state with these 2 lines.
        myColors['best'] = 'mistyrose';
        myColors['second'] = 'red';

        this.setState({ userTxt: e.target.value });
    }

---

您需要复制this.state.colors，比如让myColors=Object.assign（{}，this.state.colors）

状态中的colors字段是一个存储为引用的对象。“年龄”字段是一个整数，存储为原始值

将“颜色”字段指定给myColors时，两个变量都引用同一对象。因此，当您更新myColors时，状态中的颜色字段将更新

将年龄字段指定给myAge时，它会将状态中年龄字段的值复制到myAge字段。因此，当您更新myAge时，它不会更新状态

更多关于此的信息，请访问

为了防止这种意外的副作用，您应该创建一个新对象，并将颜色值从状态复制到该对象。您可以使用

让myColors={…this.state.colors}

声明变量时。
状态中的颜色字段是存储为引用的对象。“年龄”字段是一个整数，存储为原始值

将“颜色”字段指定给myColors时，两个变量都引用同一对象。因此，当您更新myColors时，状态中的颜色字段将更新

将年龄字段指定给myAge时，它会将状态中年龄字段的值复制到myAge字段。因此，当您更新myAge时，它不会更新状态

更多关于此的信息，请访问

为了防止这种意外的副作用，您应该创建一个新对象，并将颜色值从状态复制到该对象。您可以使用

让myColors={…this.state.colors}

当声明变量时