3
votes

Comment obtenir la valeur de l'état précédent dans reactjs

Lorsque je clique sur le bouton Nouveau numéro , j'obtiens un nombre aléatoire compris entre 0 et 15 ... Cela fonctionne bien, mais maintenant je veux quand je clique sur le bouton Numéro précédent , il me donne le numéro / état précédent.

Par exemple ..

Dès que le rendu s'exécute, j'obtiens 12. puis je clique sur le bouton Nouveau numéro qui me donne 4 , maintenant, lorsque je clique sur Numéro précédent , je veux changer l'état et me donner le numéro qui était dans l'état avant, et c'était 4. Comment obtenir cette fonctionnalité ...

Je sais que componentDidUpdate a les paramètres prevProp et prevState , mais je ne peux pas comprendre comment appeler cela sur clic. Voici mon code

class App extends React.Component {
   state = {
      randomNum: ''
   }

   componentDidMount() {
      this.getNewRandomNum()
   }

   getNewRandomNum = () => {
      let randomNum = Math.floor(Math.random() * 15)
      this.setState({ randomNum })
      console.log(this.state.randomNum)
   }

   prevNum = () => {

   }
   render() {
      return (
         <div>
            <h1>{this.state.randomNum}</h1>
            <button onClick={this.getNewRandomNum}>New Number</button>
            <button onClick={this.prevNum}>Previous Number</button>
         </div>
      )
   }
}

J'apprécierais votre aide, j'espère que je suis clair.

javascript reactjs state

2 commentaires

stockez simplement un previousNum dans l'état, et mettez-le à jour avec la valeur précédente lorsque vous en obtenez une nouvelle.

Basit, vient de vous écrire une réponse, laissez-moi savoir si cela fonctionne pour vous ;.

4 Réponses :

4
votes

Créez une valeur d'état supplémentaire comme previousNum et mettez-la à jour avec prevState lorsque vous appelez getRandomNum.

class App extends React.Component {
  state = {
    randomNum: "",
    previousNum: ""
  };

  componentDidMount() {
    this.getNewRandomNum();
  }

  getNewRandomNum = () => {
    let randomNum = Math.floor(Math.random() * 15);
    this.setState(
      prevState => {
        return {
          randomNum: randomNum,
          previousNum: prevState.randomNum
        };
      },
      () => console.log(this.state)
    );
  };

  getPreviousNum = () => {
    this.setState({
      randomNum: this.state.previousNum,
      previousNum: ""
    }, () => console.log(this.state));
  };

  render() {
    return (
      <div>
        <h1>{this.state.randomNum}</h1>
        <button onClick={this.getNewRandomNum}>New Number</button>
        <button
          onClick={this.getPreviousNum}
          disabled={typeof(this.state.previousNum) === "number" ? false : true}
        >
          Previous Number
        </button>
      </div>
    );
  }
}

Voici également le bac à sable: https://codesandbox.io/s/7345kyly21

0 commentaires

0
votes

Je stockerais simplement le numéro précédent dans l'état, ce serait le moyen le plus simple et le plus courant de le faire.

class App extends React.Component {
   state = {
      randomNum: '',
      previousNum: ''
   }

   componentDidMount() {
      this.getNewRandomNum();
   }

   getNewRandomNum = () => {
      let randomNum = Math.floor(Math.random() * 15)
      this.setState((state) => (  // this is the current state
        { 
          previousNum: state.randomNum, // this will be the previous randomNumber
          randomNum
       }));
       console.log(randomNum);
   }

   prevNum = () => {
     alert(this.state.previousNum); // put whatever code you need here
   }

   render() {
      return (
         <div>
            <h1>{this.state.randomNum}</h1>
            <button onClick={this.getNewRandomNum}>New Number</button>
            <button onClick={this.prevNum}>Previous Number</button>
         </div>
      );
   }
}

0 commentaires

1
votes

J'utiliserais Redux pour rendre le changement d'état plus prévisible et plus facile à manipuler. Tiré de cet exemple sur la documentation.

En gros, votre état sera ressemble à quelque chose comme ceci:

{
  counter: {
    past: [0, 1, 2],
    present: 3,
    future: [4]
  }
}

Et vous utilisez des réducteurs pour déplacer les valeurs.

De cette façon, il vous suffit d'appeler dispatch en lui disant de "annuler" ou " refaire ' et ne pas déplacer les valeurs à chaque fois que vous avez besoin de voyager dans le temps.

Redux est vraiment génial!

0 commentaires

0
votes

Je suggérerais d'utiliser le nouvel état comme suit: -

const [prevStart, setPrevStart] = useState(1);
const [page, setPage] = useState(1);

const handelPage = (getPage) => {
    if (getPage < prevStart) {
        ///
    }
    if (getPage > prevStart) {
        //
    }
    const target = `?page=${getPage}`
    createBrowserHistory().push({
        pathname: target,
    });
    setPrevStart(getPage);
    setPage(getPage);
}

Quelque chose comme ça résoudra le problème.

Merci

0 commentaires