1
votes

React JS Obtenir la valeur d'état d'un autre état

J'utilise React JS et je souhaite actuellement effectuer l'action comme ci-dessous:

constructor(props) {
    super(props);
        this.state = {
          Final: 0,
          TotalCount: 30,
        };
}

function = () => {
this.setState({Final: (this.state.TotalCount / 10) +1 });
}

Eh bien, je m'attendais à mes résultats de Final code > sera 4 mais c'est 1 Est-ce mon erreur de syntaxe ou je ne peux pas effectuer une opération comme celle-ci? (Toutes mes excuses avec une syntaxe ridicule puisque ma base est en C #)

reactjs

0 commentaires

4 Réponses :

1
votes

Vous devez utiliser la syntaxe suivante pour accéder à l'état lors de la définition de l'état lui-même:

this.setState((state) => ({Final: (state.TotalCount / 10) +1 }))

Comme expliqué ici:

https://reactjs.org/docs/react-component.html#setstate

1 commentaires

salut, en fait, je déclare Final et TotalCount chez mon constructeur donc je pense que je devrais utiliser this.state à la place?

1
votes

Ma meilleure supposition que vous appelez setState dans le constructeur, juste après avoir déclaré l'état, et non à componentDidMount

componentDidMount() { this.setState({Final: (this.state.TotalCount / 10) +1 }) }

Sachez que comme setState est un appel asynchrone (il n'est pas exécuté immédiatement mais indique au composant qu'il doit à nouveau restituer avec un nouvel état), s'il y a des éléments qui dépendent de l'état, vous devez les manipuler au prochain cycle de vie pour s'assurer que l'état a été mis à jour avant

0 commentaires

0
votes

Vous pouvez également faire quelque chose comme ceci:

this.setState(prevState => {

  prevState.Final = (this.state.TotalCount/10) + 1;

  return {
    ...prevState.Final
  };
});

2 commentaires

Frère, c'est une syntaxe absolument correcte. Vous pouvez l'exécuter sur ReactBaseFiddle pour vérifier.

oui, il est correct et il fonctionnera correctement, mais selon la convention, personne ne suit cette façon de définir l'état du composant. je donnais juste des conseils.

1
votes

this.setState(prev => ({ ...prev, Final: parseInt(prev.TotalCount / 10) + 1 }))
setState basically takes callback which returns the updated state from the current state, also since division is there, so safely dividing to get integer and return the updated state.

1 commentaires

setState prend essentiellement un rappel qui renvoie l'état mis à jour à partir de l'état actuel, également depuis la division est là, donc en toute sécurité en divisant pour obtenir un entier et renvoyer l'état mis à jour.