2
votes

setState ne change pas la valeur dans react native

J'ai une fonction qui bascule la valeur des variables d'état. la valeur initiale de la variable d'état est false

Voici ma fonction ...

    expandLists(label){
        this.setState( preState => ({label: !this.preState.label}),console.log(this.state))
    }

Dans l'expression ci-dessus à l'état initial, la valeur est changée en false puis elle ne change pas en true .

J'ai aussi essayé ... la méthode ci-dessous ...

    expandLists(label){ // "label" is a state variable that passed as a string 
        let result = new Boolean();
        console.log(this.state);
        if(this.state.label){
            result=false;
            console.log('Result = false');
        }
        else{
            result=true;
            console.log('Result = true');
        }
        this.setState({[label]: result},console.log(this.state))
    }

reactjs react-native setstate

0 commentaires

5 Réponses :

0
votes

Si vous passez le paramètre label sous forme de chaîne, essayez ceci:

    expandLists(label){ // "label" is a state variable that passed as a string 
        let result = new Boolean();
        console.log(this.state);
        if(this.state[label]){
            result=false;
            console.log('Result = false');
        }
        else{
            result=true;
            console.log('Result = true');
        }
        this.setState({[label]: result},console.log(this.state))
    }

La différence est donc de vérifier si la valeur actuelle est vraie . Au lieu d'utiliser this.state.label , utilisez this.state[label] .

0 commentaires

0
votes

Vérifiez de cette façon comme vous l'avez dit type de chaîne de paramètre "label"

if(this.state[label]){
...
}

if(this.state.label == "true"){
...
}

0 commentaires

0
votes

Un moyen simple d'y parvenir est

toggleLabelValue = (label) => {
    this.setState({ [label]: !this.state[label] }, () =>
      console.log(this.state)
    );
};

0 commentaires

0
votes

Essayez de basculer l'état de cette manière:

import React from 'react';

import {
    View,
    Button,
} from 'react-native';

export default class App extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            label: false
        }
    }

    changeLabel = (currentLabel) => {
        this.setState({
            label: currentLabel
        });
    };

    toggleLabel = () => {
        this.changeLabel(!this.state.label);
    };

    render() {
        return (
            <View>
                <Button onPress={this.toggleLabel} title="Toggle Label" />
            </View>
        );
    }

}

0 commentaires

0
votes

Voici une autre implémentation utilisant des hooks:

import { Text, View, StyleSheet, TouchableOpacity } from 'react-native';
import Constants from 'expo-constants';

export default function App() {
  const [label, setLabel] = useState(false);
  const toggleLable = () => {
    let temp = label;
    setLabel(!temp);
  };
  return (
    <View style={styles.container}>
      <TouchableOpacity
        onPress={toggleLable}
        style={[
          styles.btn,
          { backgroundColor: label ? '#4f4' : '#f40' },
        ]}>
        <Text style={styles.text}>{label? "TRUE": "FALSE"}</Text>
        </TouchableOpacity>
    </View>
  );
}

const styles = StyleSheet.create({
  btn: {
    width: 200,
    height: 200,
    borderRadius: 20,
    justifyContent: "center"
  },
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
    alignItems: 'center',
  },
  text:{
    fontSize: 40,
    fontWeight: "bold",
    color: "white",
    textAlign: "center"
  }
});

Capture d'écran:

Vous pouvez jouer avec le code ici: Exemple de bouton à bascule

0 commentaires