PureComponent 的 DidMount 生命周期 setState 回调不执行

[Elliott-Hu]

import Taro, { PureComponent } from "@tarojs/taro"
import { View } from "@tarojs/components";
import PropTypes from "prop-types"

import styles from "./index.module.scss"

// 这边继承的是 PureComponent，如果换成Component 就不会用问题
export default class NavigationBar extends PureComponent {
  static options = {
    addGlobalClass: true
  }

  static propTypes = {
    title: PropTypes.string,
    showHomeIcon: PropTypes.bool,
    dispatchNoticeHeightChange: PropTypes.func
  }
  static defaultProps = {
    showHomeIcon: true,
    title: "AI名片",
    dispatchNoticeHeightChange: (height) => { console.log("navigationBar 高度：", height) }
  }

  state = {
    isFirstPage: true,
    statusBarHeight: 20
  }

  HEIGHT = 44

  componentDidMount() {
    let statusBarHeight = 20
    try {
      statusBarHeight = Taro.getSystemInfoSync().statusBarHeight
    } catch (error) {
      console.log(error)
    }

    // FIXME: 回调不执行
    this.setState({ 
      isFirstPage: Taro.getCurrentPages().length === 1,
      statusBarHeight
    }, () => {
     //  预期应该打印1234，并且dispatchNoticeHeightChange
    //  然而并没有
      console.log(1234)
      this.props.dispatchNoticeHeightChange(this.HEIGHT + statusBarHeight)
   })
    
  }

  handleOnClickBack = () => {
    Taro.navigateBack()
  }
  handleOnClickBackHome = () => {
    Taro.reLaunch({ url: "/page/mainPage/pages/allHouseList/main" })
  }
  renderCapsule = () => {
    const { showHomeIcon } = this.props;
    const { isFirstPage } = this.state;

    if (showHomeIcon) {
      return (
        <View className={`${styles.capsule}${!isFirstPage ? " " + styles.double : ""}`}>
          { !isFirstPage && <View onClick={this.handleOnClickBack} className={styles.btn}><View className={`sprite ${styles["capsule-back"]}`}></View></View> }
          <View onClick={this.handleOnClickBackHome} className={styles.btn}><View className={`sprite ${styles["capsule-home"]}`}></View></View>
        </View>
      )
    }
    if (!isFirstPage) {
      return <View onClick={this.handleOnClickBack} className={`sprite ${styles.back}`}></View>
    }
    return null
  }
  render () {
    const { showHomeIcon, title } = this.props

    console.log("showHomeIcon", showHomeIcon)
    const { statusBarHeight } = this.state
    const style = { "paddingTop": `${statusBarHeight}PX`  }

    return (
      <View className={styles.navigation}>
        <View className={styles.placeholder} style={style}></View>
        <View className={styles.content} style={style}>
          <View className={`${styles["capsule-content"]} ${styles["capsule-left"]}`}>
            { this.renderCapsule() }
          </View>
          <View className={styles.title}>{ title }</View>
          <View className={styles["capsule-content"]}></View>
        </View>
      </View>
    )
  }
}

期望行为
[这里请用简洁清晰的语言描述你期望的行为]

报错信息

[这里请贴上你的完整报错截图或文字]

系统信息
Taro CLI 1.3.4 environment info:
System:
OS: macOS 10.14.1
Shell: 5.3 - /bin/zsh
Binaries:
Node: 10.16.0 - ~/.nvm/versions/node/v10.16.0/bin/node
Yarn: 1.16.0 - ~/.nvm/versions/node/v10.16.0/bin/yarn
npm: 6.9.0 - ~/.nvm/versions/node/v10.16.0/bin/npm
npmPackages:
@tarojs/async-await: 1.3.4 => 1.3.4
@tarojs/components: 1.3.4 => 1.3.4
@tarojs/plugin-babel: 1.3.4 => 1.3.4
@tarojs/plugin-csso: 1.3.4 => 1.3.4
@tarojs/plugin-sass: 1.3.4 => 1.3.4
@tarojs/plugin-uglifyjs: 1.3.4 => 1.3.4
@tarojs/redux: 1.3.4 => 1.3.4
@tarojs/redux-h5: 1.3.4 => 1.3.4
@tarojs/router: 1.3.4 => 1.3.4
@tarojs/taro: 1.3.4 => 1.3.4
@tarojs/taro-alipay: 1.3.4 => 1.3.4
@tarojs/taro-h5: 1.3.4 => 1.3.4
@tarojs/taro-swan: 1.3.4 => 1.3.4
@tarojs/taro-tt: 1.3.4 => 1.3.4
@tarojs/taro-weapp: 1.3.4 => 1.3.4
@tarojs/webpack-runner: 1.3.4 => 1.3.4
eslint-config-taro: 1.3.4 => 1.3.4
eslint-plugin-taro: 1.3.4 => 1.3.4
nerv-devtools: ^1.4.0 => 1.4.3
nervjs: ^1.4.0 => 1.4.3
react: ^16.8.6 => 16.8.6

补充信息
[可选]
[根据你的调查研究，出现这个问题的原因可能在哪里？]

[taro-bot]

欢迎提交 Issue~

如果你提交的是 bug 报告，请务必遵循 Issue 模板的规范，尽量用简洁的语言描述你的问题，最好能提供一个稳定简单的复现。🙏🙏🙏

如果你的信息提供过于模糊或不足，或者已经其他 issue 已经存在相关内容，你的 issue 有可能会被关闭。

Good luck and happy coding~

[Chen-jj]

@Elliott-Hu 请提供代码。

[taro-bot]

Hello~

您的问题所提供的信息不足，我们无法定位到具体的问题。如果有空的话还请拔冗提供更具体的信息，否则这个 issue 将在 15 天后被自动关闭。

如果您在这 15 天中更新更多信息自动关闭的流程会自动取消，如有其他问题也可以发起新的 Issue。

Good luck and happy coding~

[Elliott-Hu]

@Chen-jj 已补充信息

[Chen-jj]

@Elliott-Hu 哪个平台

[Elliott-Hu]

微信小程序

[taro-bot]

Hello~

您的问题所提供的信息不足，我们无法定位到具体的问题。如果有空的话还请拔冗提供更具体的信息，否则这个 issue 将在 15 天后被自动关闭。

如果您在这 15 天中更新更多信息自动关闭的流程会自动取消，如有其他问题也可以发起新的 Issue。

Good luck and happy coding~

[Chen-jj]

@Elliott-Hu 不是回调不执行，是你的 setState 内容和 data 一样被 diff 过滤，没有执行 setData。自己打打断点就懂了。https://nervjs.github.io/taro/docs/debug.html#debug-diff