setState是改变React组件中state值的唯一方法,不能直接对state赋值:
class Dog extends Component { constructor(props) { super(props) this.state = { color: 'white',age: 7,son: { color: 'gray',age: 1 } } } brushHair() { //right setState({color: 'black'}) //wrong this.state.color = 'black'; } }
state的更新可能是异步的,不要依赖当前state的值去计算下一个state
addAge() { //wrong setState({age: ++this.state.age}) }
正确的写法是使用setState的另一种用法,即参数可以是一个函数:
addAge() { setState((prevState,props) => ({ age: ++prevState.age })) }
当更新state的部分属性时,其他属性是不会受影响的,但仅限于第一层结构
brushSonHair() { setState({ son: { color: 'black' } }) }
上面的方法中setState改变的时第二层的属性值(son中的color),第一层的属性值(color age)不会受到影响,但son中的age属性就会丢失(可以理解为改变了son)。