Utiliser async setState

Chen 2017-04-12 12:55.

J'ai une fonction qui a envoyé une action. Je voudrais afficher un chargeur avant et après l'action. Je sais que réagir composant l'objet passé à setState. la question est de savoir comment mettre à jour la propriété de manière asynchrone:

handleChange(input) {
    this.setState({ load: true })
    this.props.actions.getItemsFromThirtParty(input)
    this.setState({ load: false })
}

Fondamentalement, tout fonctionnait très bien si je mettais cette propriété dans le cadre de l'état de l'application (en utilisant Redux), mais je préfère vraiment apporter cette propriété à l'état du composant uniquement.

reactjs react-jsx jsx

5 answers

James Donnelly 2017-04-12 19:57.

Enveloppez le reste de votre code dans le rappel du premier setState:

handleChange(input) {
  this.setState({
    load: true
  }, () => {
    this.props.actions.getItemsFromThirtParty(input)
    this.setState({ load: false })
  })
}

Avec cela, votre loadest garanti d'être défini sur trueavant l' getItemsFromThirtPartyappel et le loadest remis à false.

Cela suppose que votre getItemsFromThirtPartyfonction est synchrone. Si ce n'est pas le cas, transformez-la en promesse, puis appelez la finale setStatedans une then()méthode chaînée :

handleChange(input) {
  this.setState({
    load: true
  }, () => {
    this.props.actions.getItemsFromThirtParty(input)
      .then(() => {
        this.setState({ load: false })
      })
  })
}

Tejas Rao 2017-08-18 03:22.

vous pouvez envelopper le setState dans une promesse et utiliser async / await comme ci-dessous

setStateAsync(state) {
    return new Promise((resolve) => {
      this.setState(state, resolve)
    });
}

async handleChange(input) {
    await this.setStateAsync({ load: true });
    this.props.actions.getItemsFromThirtParty(input);
    await this.setStateAsync({ load: false })
}

Source: ASYNC AWAIT avec REACT

Tobiq 2019-08-04 05:18.

Voici une implémentation dactylographiée d'un setState "async-await":

async function setStateAsync<P, S, K extends keyof S>(
  component: Component<P, S>,
  state:
    ((prevState: Readonly<S>, props: Readonly<P>) => (Pick<S, K> | S | null)) |
    Pick<S, K> |
    S |
    null
) {
  return new Promise(resolve => component.setState(state, resolve));
}

hazardous 2017-04-12 20:27.

Voici ce que vous pouvez faire ...

Modifiez votre action pour prendre un onFetchCompleterappel, avec le input.

Changez votre poignée

handleChange(input) {
    this.setState({ load: true }, ()=>
        this.props.actions.getItemsFromThirtParty(input,
        ()=>this.setState({ load: false }))
    );
}

Cela garantira que le code du processeur d'action peut invoquer votre rappel de changement d'état même s'il n'est pas écrit de manière basée sur une promesse.

Chen 2017-04-13 13:21.

Une petite mise à jour - utilisant des promesses pour les créateurs d'action et async / await fonctionne très bien, et rend le code encore plus propre, par rapport au chaînage "alors":

(async () => {
   try {
    await this.props.actions.async1(this.state.data1);
    await this.props.actions.async2(this.state.data2) 
    this.setState({ load: false );
   } catch (e) {
    this.setState({load: false, notify: "error"});
   }
})();

Bien sûr, c'est une question de goût.

EDIT: Ajout d'un crochet manquant

Japanese Spanish German French Thai Portuguese Russian Vietnamese Italian Korean Turkish Indonesian Polish Hindi

MORE COOL STUFF

Jana Duggar : Tout ce qu'elle a dit sur l'amour et sa fenêtre de 5 ans pour trouver le « bon »

Jana Duggar a été ouverte sur sa recherche de l'amour. Voici tout ce qu'elle a dit sur le sujet et sa fenêtre de mariage de cinq ans.

2023-06-12.

Sam Heughan sait exactement ce qu'il retirera de l'ensemble "Outlander" - "J'ai l'impression d'être Jamie quand je les mets"

La star d'Outlander, Sam Heughan, a récemment révélé ce qu'il retirera du tournage pour se souvenir de Jamie Fraser, le rôle qui a fait de lui une star.

2023-06-12.

La première chanson des Beatles qui était l'une des " performances les plus excitantes " du groupe, selon un initié de Fab Four

"She Loves You" a été écrite en une heure, enregistrée en une journée, et a été la chanson des Beatles avec l'une de leurs meilleures performances de leur carrière.

2023-06-11.

Dolly Parton a aidé sa grand-mère "invalide" alors qu'aucun des autres petits-enfants ne le ferait - elle lui faisait aussi des blagues

Dolly Parton et sa grand-mère Bessie avaient une relation spéciale. Grand-mère Parton était très malade, mais cela n'a pas empêché Dolly de lui faire des farces.

2023-06-11.

10 des créatures marines les plus terrifiantes qui rôdent dans les profondeurs de l'océan

L'océan regorge de beauté, mais il abrite aussi certaines des créatures marines les plus terrifiantes de la planète. Nombre de ces animaux vivent dans les profondeurs obscures et sous haute pression des abysses.

2025-10-29.

Les 10 meilleurs enchantements d'épée dans Minecraft

Que vous affrontiez des créatures hostiles ou vous prépariez pour des affrontements PvP, connaître les meilleurs enchantements d'épée dans Minecraft peut vous donner un avantage considérable. Enchanter vos épées vous permet d'infliger plus de dégâts, d'augmenter le butin des créatures et d'accroître leur durabilité.

2025-10-29.

13 pays socialistes qui sont très différents les uns des autres

Quand on parle de pays socialistes, on imagine souvent un contrôle total de l'État et l'absence de propriété privée. Mais en réalité, les économies socialistes sont très diverses.

2025-10-29.

Récapitulatif de The Bear : Marcus est-il l'homme le plus gentil, le plus doux et le plus sincère de Chicago ?

« Enfants » laisse tomber un caméo de grand nom et des nouvelles dévastatrices

2024-07-03 19:12.

Une camionnette de livraison Amazon s'enflamme dans une explosion ardente pendant la chaleur estivale de Houston

Des images de drones ont montré des pompiers semblant lutter pour éteindre l'incendie.

2024-07-03 19:04.

Le spectacle Black Panther de Marvel sera le spectacle d'animation le plus crucial à ce jour

Eyes of Wakanda est directement lié au MCU, ainsi que des mises à jour sur X-Men '97, What If..., Daredevil, et plus encore.

2024-07-03 19:03.

L'histoire de rencontres d'Ava Gardner : retour sur les mariages et les romances de l'icône hollywoodienne

Ava Gardner a été mariée à Mickey Rooney et Frank Sintra, et a fréquenté plusieurs autres stars d'Hollywood. Voici un aperçu de l'histoire amoureuse d'Ava Gardner.

2024-06-23.

3 façons éprouvées d'améliorer vos compétences en écriture

Les avantages de l'écriture et les stratégies pour vous aider à le faire

En 2022, avec la sortie de GPT-3, la compétence en écriture semble devenir moins importante. Avec l'IA, les personnes ayant une mauvaise écriture peuvent également générer du personnel de qualité.

L'érosion lente : dévoiler les façons dont les gens perdent leur carrière

Dans le monde rapide et compétitif d'aujourd'hui, la carrière d'une personne joue un rôle important dans la croissance personnelle, la stabilité financière et la satisfaction globale de la vie. Cependant, de nombreuses personnes se retrouvent prises dans un cycle incessant de stagnation et d'insatisfaction, dépérissant progressivement dans leur vie professionnelle.

Qu'est-ce qui rend un podcast influent ?

La semaine dernière, j'ai remarqué un communiqué de presse, envoyé via PressGazette (un site Web d'information britannique). L'article annonçait qu'Acast, la société d'hébergement et de publicité de podcasts de Scandi, dirigerait un consortium d'éditeurs "probablement les plus influents" du podcasting.

Language

Japanese

Spanish

German

French

Thai

Portuguese

Russian

Vietnamese

Italian

Korean

Turkish

Indonesian

Polish

Hindi

Utiliser async setState

5 answers

Related questions

MORE COOL STUFF

Jana Duggar : Tout ce qu'elle a dit sur l'amour et sa fenêtre de 5 ans pour trouver le « bon »

Sam Heughan sait exactement ce qu'il retirera de l'ensemble "Outlander" - "J'ai l'impression d'être Jamie quand je les mets"

La première chanson des Beatles qui était l'une des " performances les plus excitantes " du groupe, selon un initié de Fab Four

Dolly Parton a aidé sa grand-mère "invalide" alors qu'aucun des autres petits-enfants ne le ferait - elle lui faisait aussi des blagues

Quel est le bois le plus dur au monde ?

10 des créatures marines les plus terrifiantes qui rôdent dans les profondeurs de l'océan

Les 10 meilleurs enchantements d'épée dans Minecraft

13 pays socialistes qui sont très différents les uns des autres

Récapitulatif de The Bear : Marcus est-il l'homme le plus gentil, le plus doux et le plus sincère de Chicago ?

À 9 800 $, voudriez-vous les emballer dans ce Toyota RAV4 2008 à sept places ?

Une camionnette de livraison Amazon s'enflamme dans une explosion ardente pendant la chaleur estivale de Houston

Le spectacle Black Panther de Marvel sera le spectacle d'animation le plus crucial à ce jour

L'histoire de rencontres d'Ava Gardner : retour sur les mariages et les romances de l'icône hollywoodienne

Qui est la femme de John Cleese ? Tout sur Jennifer Wade

Qui est la femme de Craig Melvin ? Tout sur la journaliste sportive Lindsay Czarniak

Chronologie de la relation entre Maggie Gyllenhaal et Peter Sarsgaard

les pronoms font super peur

3 façons éprouvées d'améliorer vos compétences en écriture

Les avantages de l'écriture et les stratégies pour vous aider à le faire

L'érosion lente : dévoiler les façons dont les gens perdent leur carrière

Qu'est-ce qui rend un podcast influent ?

Language