react中同时setState同一个对象的两个不同参数只有最后一个生效的原因以及解决办法

骑猪看日落 2022-08-29 13:59 125阅读 0赞

### 问题： ###

我定义了2个表单对应的事件去处理日期数据以及其他类型的数据，我在表单某个Input输入时，调用onBlur在输入框失去焦点时自动根据输入框的值（身份证号码）填充出生日期以及性别，即实现下图效果

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h6eE9ubGluZU9r_size_16_color_FFFFFF_t_70][]

但是我发现react中同时setState同一个对象的两个不同参数 只有最后一个生效，why?

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h6eE9ubGluZU9r_size_16_color_FFFFFF_t_70 1][]

onChangeTime = (dateString, timeType, editType) => {
        const statusData = editType
        this.setState({
          [statusData]: Object.assign({}, prevState[statusData], { [timeType]: dateString })
        })
      }
    
      onChangeDrawer = (statusData, key, value) => {
        this.setState({
          [statusData]: Object.assign({}, prevState[statusData], { [key]: value })
        })
      }

### 原因： ###

React会将多个this.setState产生的修改放在一个队列里，缓一缓，攒在一起，觉得差不多了再引发一次更新过程，而我们的更新是异步的，导致数据被覆盖，没有及时更新。

react为了提高整体的渲染性能，会将一次渲染周期中的state进行合并，在这个渲染周期中你对所有setState的所有调用都会被合并起来之后，再一次性的渲染，这样可以避免频繁的调用setState导致频繁的操作dom，提高渲染性能。具体的实现方面，可以简单的理解为react中存在一个状态变量isBatchingUpdates，当处于渲染周期开始时，这个变量会被设置成true，渲染周期结束时，会被设置成false，react会根据这个状态变量，当出在渲染周期中时，仅仅只是将当前的改变缓存起来，等到渲染周期结束时，再一次性的全部render。

### 解决 ###

但是这样子的话，我们如何处理呢？

## **setState 是异步的** ##

其实react的setState也接受一个函数，默认提供给我们它上一个计算完的state值：

this.setState((prevState, props) => ({
      count: prevState.count + 1
    }))

依样画葫芦，代码修改后，这样就可以实现续接setState啦

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h6eE9ubGluZU9r_size_16_color_FFFFFF_t_70 2][]

这就跟这个例子是一样的：

export class Todo extends React.Component{
      ... 
      increaseScore () {
        this.setState({count : this.state.count + 1});
        this.setState({count : this.state.count + 1});
      }
      ...
    }
    复制代码

上面这段代码， `increaseScore`函数中希望将 count 这个状态的值在原来的基础上加1再加1，但是实际情况其实并不想你预期的那样，如果你在控制台把count的值打出来，会发现它只增加了1！

// 在错误示例中
    this.setState({count : this.state.count + 1}) 
    this.setState({count : this.state.count + 1}) 
    
    // 在正确示例中
    this.setState((prevState, props) => ({
      count: prevState.count + 1
    }))
    this.setState((prevState, props) => ({
      count: prevState.count + 1
    }))

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h6eE9ubGluZU9r_size_16_color_FFFFFF_t_70]: /images/20220829/51342e4172b04715a2a31d2e9c515f2f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h6eE9ubGluZU9r_size_16_color_FFFFFF_t_70 1]: /images/20220829/7d50d235d0d84b3d874059f72c6f49e4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h6eE9ubGluZU9r_size_16_color_FFFFFF_t_70 2]: /images/20220829/a980220a74d5464b8625c85f8a03beec.png