Comment puis-je envoyer un nouvel accessoire à un composant après le temps en utilisant la fonction setTimeout ()?

Question 1

J'ai un composant appelé flash qui est destiné à être dans le DOM seulement pendant 5 secondes (c'est un message informant l'utilisateur qu'il a envoyé le message avec succès) et je veux qu'il commence à disparaître après ...

reactjs settimeout flash-message

1

ms3300 16 mars 2021 à 23:53

Answer

Le rendu ne s'exécute que lors de la mise à jour du composant et un setTimeout ne déclenchera pas cette mise à jour. Cependant, la modification d'une valeur d'état déclenche la mise à jour du composant.

Ce que vous devez faire est d'imprimer le composant Flash directement sur la méthode render et de lier le prop à un état booléen.

<Flash close={this.state.closeFlashMessage}>{this.state.flashMessage}</Flash>

Et je mettrais la fonction timeout sur la méthode .

componentDidMount() { this.mounted = true; setTimeout(() => { //check the mounted state in case the component is disposed before the timeout. if(this.mounted) { //here I send the component the prop 'close' after two seconds this.setState({ closeFlashMessage: true }); } }, 2000); } //add this method to prevent any state management during the component's disposal componentWillUnmount() { this.mounted = false; }

1

John 16 mars 2021 à 21:55

Answer

Cela ne fonctionne pas car le simple fait de définir flash = ... ne déclenchera pas de nouveau rendu. Vous devrez stocker ces informations dans l'état de votre composant et les mettre à jour afin de le faire fonctionner correctement. Je pense que quelque chose comme ça fonctionnerait:

{this.state.flashMessage && <Flash close={this.state.isFlashMessageClosed}>{this.state.flashMessage}</Flash>

Je ne recommanderais pas non plus de définir un délai d'expiration directement dans votre méthode de rendu. Cela devrait être un effet secondaire déclenché par un changement d'état, donc je recommanderais de le mettre dans componentDidUpdate comme ceci:

componentDidUpdate(prevProps, prevState) {
  if(prevState.flashMessage !== this.state.flashMessage) { 
    // If the flash message changed, update state to show the message
    this.setState({ isFlashMessageClosed: false });

    setTimeout(()=>{
      // Update state to close the message after 2 seconds
      this.setState({ isFlashMessageClosed: true });
    }, 2000);
  }
}

J'espère que cela fonctionnera pour vous.

1

Gyanreyer 16 mars 2021 à 21:17

Question 2

Le rendu ne s'exécute que lors de la mise à jour du composant et un setTimeout ne déclenchera pas cette mise à jour. Cependant, la modification d'une valeur d'état déclenche la mise à jour du composant.

Ce que vous devez faire est d'imprimer le composant Flash directement sur la méthode render et de lier le prop à un état booléen.

<Flash close={this.state.closeFlashMessage}>{this.state.flashMessage}</Flash>

Et je mettrais la fonction timeout sur la méthode .

componentDidMount() { this.mounted = true; setTimeout(() => { //check the mounted state in case the component is disposed before the timeout. if(this.mounted) { //here I send the component the prop 'close' after two seconds this.setState({ closeFlashMessage: true }); } }, 2000); } //add this method to prevent any state management during the component's disposal componentWillUnmount() { this.mounted = false; }

1

John 16 mars 2021 à 21:55

Question 3

Cela ne fonctionne pas car le simple fait de définir flash = ... ne déclenchera pas de nouveau rendu. Vous devrez stocker ces informations dans l'état de votre composant et les mettre à jour afin de le faire fonctionner correctement. Je pense que quelque chose comme ça fonctionnerait:

{this.state.flashMessage && <Flash close={this.state.isFlashMessageClosed}>{this.state.flashMessage}</Flash>

Je ne recommanderais pas non plus de définir un délai d'expiration directement dans votre méthode de rendu. Cela devrait être un effet secondaire déclenché par un changement d'état, donc je recommanderais de le mettre dans componentDidUpdate comme ceci:

componentDidUpdate(prevProps, prevState) {
  if(prevState.flashMessage !== this.state.flashMessage) { 
    // If the flash message changed, update state to show the message
    this.setState({ isFlashMessageClosed: false });

    setTimeout(()=>{
      // Update state to close the message after 2 seconds
      this.setState({ isFlashMessageClosed: true });
    }, 2000);
  }
}

J'espère que cela fonctionnera pour vous.

1

Gyanreyer 16 mars 2021 à 21:17

Comment puis-je envoyer un nouvel accessoire à un composant après le temps en utilisant la fonction setTimeout ()?

2 réponses

Questions connexes

De nouvelles questions

reactjs