javascript - 为什么 mapStateToProps 只以这种奇怪的方式更新？ (对此可以做些什么？)

Question

将 redux 与 react-native 结合使用发现 mapStateToProps 仅在另一个正在运行的手机应用程序窗口首先切换到时才会更新。

例如下面的测试代码预期的步骤:

1. 显示默认开始测试文本。
2. 按发送文本操作按钮

产生:

1. 显示更新的更改 文本而不是开始

取而代之的是:

1. 需要切换到另一个正在运行的应用程序窗口(例如:时钟应用程序)，然后切换回开发应用程序。
2. 显示更新的更改 文本而不是开始

除非我们先在应用程序窗口之间来回切换，否则 mapStateToProps 函数不会更新组件。

有什么想法吗？

---

测试代码

reducer

import { combineReducers } from 'redux';


const test = (state = 'Start', action) => {
    switch(action.type){
        case 'ADD':
            return('Changed')
        default:
            return state
    }
}

export default combineReducers({
    test
})

测试 Action +容器

import { connect } from 'react-redux'
import TestComp from '../components/TestComp'


const mapStateToProps = (state) => ({
    test: state.test
})

const mapDispatchToProps = (dispatch) => ({
     testDispatch: () => dispatch({type: 'ADD'})
})

export default connect(
   mapStateToProps,
   mapDispatchToProps
)(TestComp)

组件

import React, { Component } from 'react'


class TestComp extends Component{
    constructor(props){
        super(props)

        this.test = props.test
        this.testDispatch = props.testDispatch
    }

    render(){
        return(
            <View>
                <Text>
                     {this.test}
                </Text>

                <Button
                   title='Dispatch Test Action'
                   onPress={() => this.testDispatch()}
                />
            </View>

        )
    }
}


export default TestComp

Answer 1

问题是您在构造函数中捕获了 props.test 的值。 This.test 永远不会在对象的生命周期内再次更新，这就是您看不到更新的原因。

相反，您应该删除 TestComp 组件中的 this.test 并改用 this.props.test。