setState与dispatch同时使用造成视图不更新的问题

[myl0204]

相关平台

微信小程序

复现仓库

https://github.com/myl0204/taro2-bug-report
小程序基础库: 2.14.1
使用框架: React

复现步骤

1. 一个被connect的组件，且是PureComponent
2. 在事件回调中同时触发一个无用的setState以及dispatch一个action
3. *无用的setState*指的是类似this.setState({})或者setState的值与当前值一致

触发事件回调后，redux传递给组件的props的值发生了改变，而视图未更新.

---

问题分析

debug后发现，dispatch更改props的值时候，同时更改了prevProps对应的值，造成了在SCU阶段认为组件的state、props未发生更新，故视图未更新。

// 更改props的代码 https://github.com/NervJS/taro/blob/2.x/packages/taro-redux/src/connect/connect.js#L39
if (this.props[key] !== val) {
  this.props[key] = val
  isChanged = true
}

// props和prevProps指向同一变量
// https://github.com/NervJS/taro/blob/2.x/packages/taro-weapp/src/lifecycle.js#L91
// https://github.com/NervJS/taro/blob/2.x/packages/taro-weapp/src/lifecycle.js#L118
// 在上面更改props时，同时更改了prevProps
component.prevProps = component.props

// 由于之前触发过一次enqueueRender，以下逻辑不会执行
// https://github.com/NervJS/taro/blob/2.x/packages/taro-redux/src/connect/connect.js#L44
if (!this._dirty) {
  this.prevProps = prevProps;
}

导致了最后SCU返回false

讨论

在赋值的时候是否可以做一层浅复制？

期望结果

视图更新

实际结果

视图不更新

环境信息

Taro CLI 2.2.16 environment info:
    System:
      OS: macOS 11.2.1
      Shell: 5.8 - /bin/zsh
    Binaries:
      Node: 10.16.3 - ~/.nvm/versions/node/v10.16.3/bin/node
      Yarn: 1.19.1 - ~/.nvm/versions/node/v10.16.3/bin/yarn
      npm: 6.9.0 - ~/.nvm/versions/node/v10.16.3/bin/npm
    npmPackages:
      @tarojs/components: 2.2.16 => 2.2.16
      @tarojs/components-qa: 2.2.16 => 2.2.16
      @tarojs/mini-runner: 2.2.16 => 2.2.16
      @tarojs/plugin-terser: 2.2.16 => 2.2.16
      @tarojs/redux: 2.2.16 => 2.2.16
      @tarojs/redux-h5: 2.2.16 => 2.2.16
      @tarojs/router: 2.2.16 => 2.2.16
      @tarojs/taro: 2.2.16 => 2.2.16
      @tarojs/taro-alipay: 2.2.16 => 2.2.16
      @tarojs/taro-h5: 2.2.16 => 2.2.16
      @tarojs/taro-qq: 2.2.16 => 2.2.16
      @tarojs/taro-quickapp: 2.2.16 => 2.2.16
      @tarojs/taro-rn: 2.2.16 => 2.2.16
      @tarojs/taro-swan: 2.2.16 => 2.2.16
      @tarojs/taro-tt: 2.2.16 => 2.2.16
      @tarojs/taro-weapp: 2.2.16 => 2.2.16
      @tarojs/webpack-runner: 2.2.16 => 2.2.16
      eslint-config-taro: 2.2.16 => 2.2.16
      eslint-plugin-taro: 2.2.16 => 2.2.16
      nerv-devtools: ^1.5.5 => 1.5.7
      nervjs: ^1.5.5 => 1.5.7
      stylelint-config-taro-rn: 2.2.16 => 2.2.16
      stylelint-taro-rn: 2.2.16 => 2.2.16

[jgchenu]

您好，3.x也同时存在这个问题，麻烦修复一下哦～