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

Question

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

想知道是否有人可以解释为什么会这样？Here is a link to my webpackbin example. As you write in the input, the state is changed on the color object.。

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

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

Answer 1

发生这种情况是因为您在这里直接操纵状态。 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，例如 let myColors = Object.assign({}, this.state.colors)

Answer 2

状态中的颜色字段是一个存储为参考的对象。年龄字段是一个整数，存储为原始值。

当您将颜色字段分配给 myColors 时，两个变量都引用同一个对象。因此，当您更新 myColors 时，状态中的颜色字段也会更新。

当你将age字段赋值给myAge时，它会将state中age字段的值复制到myAge字段。所以当你更新 myAge 时，它不会更新状态。

更多信息请见 Primitive value vs Reference value

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

let myColors = {...this.state.colors};

声明变量时。

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

Why is SetState in React updating other objects in handler?

javascript

setstate

reactjs