1
votes

Comment puis-je mettre à jour l'état du compteur à chaque clic?

Je travaille avec une API telle qu'en cliquant sur le bouton "Afficher plus" il y a un compteur qui augmente de 25 et affiche le contenu suivant:

some_random_link/append/25/0
some_random_link/append/25/0
some_random_link/append/25/0

Attendu:

some_random_link/append/25/0
some_random_link/append/50/0
some_random_link/append/75/0

Réel:

constructor(props){
this.state = { counter: 0}}
showMore = () => {
axios.get(some_random_link/append/${this.state.counter + 25}/0
  }.then(res => {
  this.setState({ counter: this.state.counter + 25 });
});

render(){
return(
<div>

 <button onClick={this.showMore}>show more</button>

</div>

reactjs counter

3 commentaires

axios et setState sont tous deux async . Essayez d'utiliser async / wait .

Je n'ai pas en mesure de reproduire l'erreur (mais assurez-vous d'ajouter super (accessoires ) comme premier appel dans le constructeur. Pouvez-vous créer un exemple reproductible minimal , sur StackBlitz ou CodeSandbox ?

La demande d'Axios a-t-elle abouti? Le code n'incrémentera pas le compteur si la demande échoue.

3 Réponses :

0
votes

Appeler l'appel axios après setState ()

class Counter {
  constructor(props) {
    this.state = { counter: 0 };
  }

  showMore = () => {
    this.setState(
      ({ counter }) => ({ counter: counter + 25 }),
      () => {
        axios.get(`some_random_link/${this.state.counter}/0`); // this.state.counter already updated
      }
    );
  };

  render() {
    return (
      <div>
        <button onClick={this.showMore}>show more</button>
      </div>
    );
  }
}

0 commentaires

3
votes

setState est un processus asynchrone, par conséquent, lorsque vous souhaitez mettre à jour un état en utilisant le précédent, procédez comme suit

class Counter {
  constructor(props) {
    this.state = { counter: 0 };
  }

  _showMore = () => {
    const { counter } = this.state;
    axios.get(`some_random_link/append/${counter + 25}/0`).then(res => {
      this.setState(prevState => ({ counter: prevState.counter + 25 }));
    });
  };

  render() {
    return (
      <div>
        <button onClick={this._showMore}>show more</button>
      </div>
    );
  }
}

0 commentaires

0
votes

this.setState () est asynchrone! donc au lieu de this.setState ({}) changez-le en

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<div id="root"></div>

Pour plus de détails, consultez ce lien: Attention: React setState est asynchrone!

class App extends React.Component {
constructor(props){
super(props)
this.state={counter:0};
}
  showMore = () => {
    axios
      .get(`/fake/fake/fake/${this.state.counter}`)
      .then(() => {
        console.log("fake data");
      })
      .catch(() => {
      console.log(this.state.counter)
        
        this.setState(prevState => ({ counter: prevState.counter + 25 }));
      });
  };
  
  render(){
    return (
       <span style={{background:"green",color:"#fff",padding:"15px",cursor:"pointer"}}onClick={this.showMore}>PLZ CLICK ME</span>
    )
  }
}

ReactDOM.render(<App />, document.querySelector('#root'));

this.setState(prev => counter : prev.counter + 25)

0 commentaires