componentDidShow不更新Redux的状态

[soqt]

问题描述
[问题描述：站在其它人的角度尽可能清晰地、简洁地把问题描述清楚]

复现步骤
A页面connect到redux store，然后在componentDidShow中对store中的值请求。
B页面更新store状态，log成功，B页面渲染成功。返回A页面，在componentDidShow打印出的值还是原值

期望行为
B页面componentDidShow中的值同步更新

• 操作系统: [e.g. Mac]
• Taro 版本 [e.g. v.1.2.13]
• Node.js 版本 [e.g. v10.14.2]
• 报错平台 [weapp]

[taro-bot]

欢迎提交 Issue~

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

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

Good luck and happy coding~

[Chen-jj]

@soqt 复现不了，提供下可复现代码。

[soqt]

@Chen-jj

import Taro, { Component } from '@tarojs/taro'
import { View } from '@tarojs/components'
import { connect } from '@tarojs/redux'

import './index.scss'

@connect(({ counter }) => ({
  counter
}))
class Index extends Component {

  config = {
    navigationBarTitleText: '首页'
  }

  constructor(props) {
    super(props)
  }

  componentWillMount = () => {
    Taro.eventCenter.on('onEvent', () => {
      return console.log('hi')
    })
  }

  componentWillReceiveProps (nextProps) {
    console.log(this.props, nextProps)
  }

  componentWillUnmount () { }

  componentDidShow () {
    console.log(this.props.counter.num);
    
   }

  componentDidHide () { }

  render () {
    return (
      <View className='index'>
      </View>
    )
  }
}

export default Index

import Taro, { Component } from '@tarojs/taro'
import { View, Button, Text } from '@tarojs/components'
import { connect } from '@tarojs/redux'

import { add, minus, asyncAdd } from '../../actions/counter'


@connect(({ counter }) => ({
    counter
}), (dispatch) => ({
    add() {
        dispatch(add())
    },
    dec() {
        dispatch(minus())
    },
    asyncAdd() {
        dispatch(asyncAdd())
    }
}))
class Second extends Component {
    config = {
        navigationBarTitleText: '第二页'
    }

    componentWillReceiveProps(nextProps) {
        console.log(this.props, nextProps)
    }

    componentWillUnmount() { }

    componentDidShow() { }

    componentDidHide() { }

    render() {
        return (
            <View className='index'>
                <Button className='add_btn' onClick={this.props.add}>+</Button>
                <Button className='dec_btn' onClick={this.props.dec}>-</Button>
                <Button className='dec_btn' onClick={this.props.asyncAdd}>async</Button>
                <View><Text>{this.props.counter.num}</Text></View>
                <View><Text>Hello, World</Text></View>
            </View>
        )
    }
}

export default Second

这是首页和第二页。第二页更新store，第一页接收不到。我试过是因为Taro.eventCenter的缘故，如果把componentWillMount去掉就好了。Taro.eventCenter好像把redux拦截掉了

[jaredchao]

我目前也遇到这个问题，使用的 mobx， A 页面使用 store的数据， B页面更新store后返回A页面 A页面数据 未更新

[Chen-jj]

@soqt 这样改

componentWillMount () {
  Taro.eventCenter.on('onEvent', () => {
    return console.log('hi')
  })
}

[soqt]

@Chen-jj 谢谢！不过这是什么原理，是因为arrow function不绑定this的关系吗？所有的生命周期函数最好都不要用arrow function吗？

[taro-bot]

Hello~

您的问题楼上已经有了确切的回答，如果没有更多的问题这个 issue 将在 15 天后被自动关闭。

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

Good luck and happy coding~

[Chen-jj]

@soqt 翻一翻小程序 @tarojs/redux 包中 connect 的写法就明白了，我们在 componentWillMount 中进行监听。另外生命周期也不需要 bind，它们被调用时的 this 本来就是 component 实例本身。

[soqt]

@Chen-jj 好的 谢谢！