Блог

Я пытаюсь создать «круглый» счетчик для игры, созданной с помощью 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>
            )}
      
    }
    
    
}
 

The console.log(count) in afterGame.js show «undefined» and when it come back to buttonNextGame.js it always show «1»

Does anyone have a solution to have a working counter that increment 1 when I click on my button ?

Thanks