Question

我的应用程序基于expo，我正在使用redux进行状态处理。我有一个问题，我想更新另一个组件在按下时的组件状态。如下面的代码所示，我有两个组件ItemGenerator和LoadCounter。 ItemGenerator生成可按项目的列表。而LoadCounter只是通过在Text View中打印计数器值来返回它。问题是，当我按列表时，它会更新日志中的计数器值，但LoadCounter状态保持不变。但是，如果我再次重新打开屏幕，它将更新LoadCounter中的计数器状态。我想在印刷时更新LoadCounter的状态。请指导我解决此问题：

List.js

 class List extends Component {
    render(){
        return(
            <View>
                <ItemGenerator />
                <LoadCounter counter={this.props.counter}/>
            </View>
        )
    }
}

function mapStateToProps(state) {
    return {
        counter: state.counter.counter
    }
}

function mapDispatchToProps(dispatch) {
    return {
        increaseCounter: () => dispatch({ type: 'INCREASE_COUNTER' }),
        decreaseCounter: () => dispatch({ type: 'DECREASE_COUNTER' }),
    }
}

export default connect(mapStateToProps)(List);

ItemGenerator.js

 class ItemGenerator extends Component {

    render() {
        return (
            <ScrollView>
                {
                    this.state.data.map((item, index) => {
                        return(<ItemList navigate={this.props.navigate} data={item} key={index}/>)
                    })
                }
            </ScrollView>
        )
    }

}

ItemList.js

class ItemList extends Component {
    render() {
        return(
            <View>
                <TouchableOpacity onPress={() => this.props.increaseCounter()}>
                    <Card containerStyle={{margin: 0}}>
                        <View style={{flex:1, flexDirection:'row', height:70, alignItems:'center', justifyContent:'space-between'}}>
                            <View style={{flexDirection:'row', alignItems:'center', width:'55%'}}>
                                <View style={{flexDirection:'column', marginLeft:10}}>
                                    <Text style={{...}}>{this.props.data.name}</Text>
                                </View>
                            </View>
                        </View>
                    </Card>
                </TouchableOpacity>
            </View>
        )
    }
}

function mapDispatchToProps(dispatch) {
    return {
        increaseCounter: () => dispatch({ type: 'INCREASE_COUNTER' }),
        decreaseCounter: () => dispatch({ type: 'DECREASE_COUNTER' }),
    }
}

export default connect(mapStateToProps)(ItemList);

counterReducer.js

const initialState = {
    counter: 1
}
const counterReducer = (state = initialState, action) => {
    switch (action.type) {
        case 'INCREASE_COUNTER':
            return { counter: state.counter + 1 }
        case 'DECREASE_COUNTER':
            return { counter: state.counter - 1 }
    }
    return state
}

export default counterReducer;

LoadCounter.js

class LoadCounter extends Component {
    render(){
        return(
            <View>
                <Text>{this.props.counter}</Text>
            </View>
        )
    }
}

在Redux上响应本机更新组件状态

0 个答案: