J'essaye de mettre à jour la valeur d'état immédiatement avec l'utilisation de prevState mais la valeur ne change pas. Je sais que seState est une fonction asycnc mais si j'utilise prevState, ne doit pas être mis à jour immédiatement? Où je fais l'erreur?

   count: 0
    this.setState((prevState) => ({
      count: prevState +1
    }));

    console.log(this.state.count+" count")
2
Neo 3 sept. 2020 à 15:42

3 réponses

Meilleure réponse

Ok, vous devez comprendre la chose suivante

function foo() {
  this.setState((prevState) => ({
    count: prevState + 1,
  }));
}

//call function first and then log
foo()
console.log(count) // here you will get your answer

N'oubliez pas que n'importe quel nombre d'instructions this.setState dans une fonction parent s'exécutera après la fin de la fonction parent

1
Abhi Patel 3 sept. 2020 à 12:48

Il doit être prevState.count + 1

1
Amir Hossein 3 sept. 2020 à 13:53

Comme vous le savez, setState est asynchrone. Mais apprenez également si vous passez le rappel dans setstate, alors vous devez appeler prevState.something en tant que something is your state. Donc, fondamentalement, vous devez faire ceci:

this.setState(
      (prevState) => ({
        count: prevState.count + 1
      }),
      () => {
        console.log(this.state.count + " count");
      }
    );

Voici POC:

import React from "react";
import "./styles.css";

class Test extends React.Component {
  state = {
    count: 0
  };

  handleClick = () => {
    this.setState(
      (prevState) => ({
        count: prevState.count + 1
      }),
      () => {
        console.log(this.state.count + " count");
      }
    );
  };

  render() {
    return (
      <>
        {this.state.count}
        <button onClick={this.handleClick}>Click </button>
      </>
    );
  }
}

export default function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <Test />
    </div>
  );
}


Voici la démo: https: // codesandbox.io/s/serene-beaver-cu4bl?file=/src/App.js:0-596

1
Shubham Verma 3 sept. 2020 à 12:48