0
votes

Comment exécuter une ligne de code après une fonction qui contient setState lorsque la mise à jour de l'état est terminée?

Comment exécuter une autre fonction () après la fin de myFunction () dans le composant enfant sans la placer dans myFunction ()? anotherFunction () aura une préoccupation distincte mais dépend de la mise à jour de l'état de myFunction () en premier. Ou peut-être ai-je ce mal complètement structuré? L'aide est appréciée

class Parent extends React.Component {
 constructor() {
  super()
  this.state = {/*...*/}
 }
 myFunction = () => {
  //...
  this.setState(/*...*/)
 }
 anotherFunction = () => {
  //...
 }
 render() {
  return (
          <Child
           myFunction={this.myFunction}
           anotherFunction={this.anotherFunction}
          />
         )
 }
}

class Child extends React.Component {
 constructor() {
  super()
 }
 render() {
  return (
   <button
    onClick={() => {
     this.props.myFunction()
    }}
   >
    My Button
   </button>
  )
 }
}

reactjs setstate

0 commentaires

3 Réponses :

1
votes

setState accepte un deuxième argument comme callback qui est déclenché après la modification réussie de l ' état . Essayez quelque chose comme ceci:

 myFunction = () => {
  //...
  this.setState(/*...*/, ()=>this.anotherFunction())
 }
 anotherFunction = () => {
  //...
 }

2 commentaires

Merci mais anotherFunction () a une préoccupation différente de myFunction (). N'est-ce pas considéré comme une mauvaise pratique de le faire de cette façon?

Je ne pense pas que ce soit considéré comme une mauvaise pratique si vous souhaitez appeler anotherFunction uniquement si state est changé dans myFunction . Dans ce cas, le callback devient utile, consultez développeur .mozilla.org / en-US / docs / Glossary / Callback_function

0
votes

donc setState fournit une fonction de rappel après avoir mis à jour l'état.

donc dans votre cas, appelez une autre fonction comme celle-ci et elle sera déclenchée une fois setState terminé.

 myFunction = () => {
  //...
  this.setState(/*...*/, ()=>this.anotherFunction())
 }
 anotherFunction = () => {
  //...
 }

J'espère que cela vous aidera, n'hésitez pas à avoir des doutes

0 commentaires

0
votes

setState peut avoir un rappel :)

this.setState({ name: "changed"}, ()=>{console.log(this.state.name)})

0 commentaires