[英]Why is SetState in React updating other objects in handler?
在onChange事件处理程序中,我仅在userTxt上进行setState()调用,但看起来它还设置了颜色对象的状态。 对我来说奇怪的是,这仅发生在颜色对象上,而没有发生在年龄变量上。
想知道是否有人可以解释为什么会这样吗? 这是我的webpackbin示例的链接。 在输入中写入时,颜色对象上的状态会更改。 。
我希望有人可以向我解释为什么会这样。 提前非常感谢您。
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
发生这种情况是因为您直接在这里操纵状态。 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时,两个变量都引用同一对象。 因此,当您更新myColors时,状态中的颜色字段将被更新。
当您将年龄字段分配给myAge时,它将状态中的年龄字段的值复制到myAge字段。 因此,当您更新myAge时,它不会更新状态。
为避免这种意外的副作用,您应该创建一个新对象并将颜色值从状态复制到该对象。 您可以使用
let myColors = {...this.state.colors};
声明变量时。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.