reactjs - 导航后反应计数器状态恢复为默认值

Question

我正在尝试为使用 react 制作的游戏设置一个“圆形”计数器。我的问题是：当我点击我的按钮时，计数器在我的按钮页面上获得 +1，但在我的其他页面上显示未定义。当它回到按钮时，状态值回到初始值并且不保存我之前输入的值。任何人都可以帮助我吗？

这里的代码：

buttonNextAfterGame.js

class ButtonNextAfterGame extends React.Component {

    constructor(props){
        super(props)
        this.state = {
            listPlayers: this.props.navigation.getParam('listPlayers'),
            gameName: this.props.navigation.getParam('gameName'),
            currentPlayer: this.props.navigation.getParam('currentPlayer'),
            counter: ''
        }
    }

    __goToAfterGame(){
        var listPlayers = this.state.listPlayers;
        var gameName = this.state.gameName;
        var currentPlayer = this.state.currentPlayer;
        var counter = this.state.counter;

        this.setState({counter: this.state.counter + 1})

        this.props.navigation.replace('AfterGame', {listPlayers, gameName, currentPlayer, counter});
    }

    render() {

        console.log(this.state.counter)
        return (
            <View>
               <TouchableOpacity title="Go vers l'afterGame" onPress={() => this.__goToAfterGame()} style={styles.appButtonContainer}>
               <Text style={styles.appButtonText}>{"Next AfterGame"}</Text>
                </TouchableOpacity> 
            </View>
        )
    }
}

afterGame.js

class afterGame extends React.Component {

    constructor(props){
        super(props)
        this.state = {
            listPlayers: this.props.navigation.getParam('listPlayers'),
            gameName: this.props.navigation.getParam('gameName'),
            currentPlayer: this.props.navigation.getParam('currentPlayer')
        }
    }

   componentDidMount(){
 
   }

    render() {

        const {navigation} = this.props;
        const count = navigation.getParam('counter');

        console.log(count)

        if (this.state.gameName.title == "JeNaiJamais") {
            return (
                <View>
                    <ImageBackground source={require('../assets/pregame_background.png')} style={{width: '100%', height: '100%'}}>
                        <Text style={styles.display}>Est-ce que {this.state.currentPlayer} a répondu ?</Text>
                        <TouchableOpacity style={styles.appButtonContainer}>
                            <Text style={styles.appButtonText}>{"Oui"}</Text>
                        </TouchableOpacity>
    
                        <TouchableOpacity style={styles.appButtonContainer}>
                            <Text style={styles.appButtonText}>{"Non"}</Text>
                        </TouchableOpacity> 
                        <ButtonNextPreGame/>
                    </ImageBackground>
                </View>
            )} 
            if (this.state.gameName.title == "ActionVerite") {
            return (
                <View>
                    <ImageBackground source={require('../assets/pregame_background.png')} style={{width: '100%', height: '100%'}}>
                        <Text style={styles.display}>Est-ce que {this.state.currentPlayer} a bu ?</Text>
                        <TouchableOpacity style={styles.appButtonContainer}>
                            <Text style={styles.appButtonText}>{"Oui"}</Text>
                        </TouchableOpacity>
    
                        <TouchableOpacity style={styles.appButtonContainer}>
                            <Text style={styles.appButtonText}>{"Non"}</Text>
                        </TouchableOpacity> 
                        <ButtonNextPreGame/>
                    </ImageBackground>
                </View>
            )}
            else if (this.state.gameName.title == "CultureG") {
                return (
                    <View>
                        <ImageBackground source={require('../assets/pregame_background.png')} style={{width: '100%', height: '100%'}}>
                            <Text style={styles.display}>Est-ce que {this.state.currentPlayer} a bu ?</Text>
                            <TouchableOpacity style={styles.appButtonContainer}>
                                <Text style={styles.appButtonText}>{"Oui"}</Text>
                            </TouchableOpacity>
        
                            <TouchableOpacity style={styles.appButtonContainer}>
                                <Text style={styles.appButtonText}>{"Non"}</Text>
                            </TouchableOpacity> 
                            <ButtonNextPreGame/>
                        </ImageBackground>
                    </View>
            )}
            else if (this.state.gameName.title == "JohnnyDepp") {
                return (
                    <View>
                        <ImageBackground source={require('../assets/pregame_background.png')} style={{width: '100%', height: '100%'}}>
                            <Text style={styles.display}>Qui a perdu ?</Text>
                            <FlatList  
                                data={this.state.listPlayers} 
                                keyExtractor={(item) => item.index.toString()} 
                                renderItem={({item}) => <TouchableOpacity style={styles.appButtonContainer} key={item.index} >
                                    <Text style={styles.appButtonText}>{item.player}</Text>
                                    </TouchableOpacity>}/>
                            <ButtonNextPreGame/>
                        </ImageBackground>
                    </View>
            )}
            else{
                return (
                    <View>
                    <ImageBackground source={require('../assets/pregame_background.png')} style={{width: '100%', height: '100%'}}>
                        <Text style={styles.display}>Est-ce que {this.state.currentPlayer} a bu ?</Text>
                        <TouchableOpacity style={styles.appButtonContainer}>
                            <Text style={styles.appButtonText}>{"Oui"}</Text>
                        </TouchableOpacity>
    
                        <TouchableOpacity style={styles.appButtonContainer}>
                            <Text style={styles.appButtonText}>{"Non"}</Text>
                        </TouchableOpacity> 
                        <ButtonNextPreGame/>
                    </ImageBackground>
                </View>
            )}
      
    }
    
    
}

afterGame.js 中的 console.log(count) 显示“未定义”，当它返回 buttonNextGame.js 时，它总是显示“1”

当我点击我的按钮时，有没有人有一个工作计数器增加 1 的解决方案？

谢谢

标签： reactjsreact-nativereact-navigationreact-native-navigation