Impossible de mettre à jour le contenu dans useEffect et de le rendre

Question

J'essaie de créer une application Web qui déclenche un tas de feux d'artifice une fois qu'un bouton est enfoncé. Il utilise React et j'essaie d'utiliser le hook useEffect pour déclencher des feux d'artifice après la mise à jour de la variable ID. Lorsqu'il commence le rendu, il fonctionne correctement et déclenche le feu d'artifice comme je le souhaite, mais le bouton de redémarrage ne fonctionne pas. Aucun feu d'artifice n'a été diffusé après la première fois. En utilisant console.log, je me suis assuré que lorsque le bouton est enfoncé et que le nombre change, le bloc useEffect est bien appelé. Je pense que ce qui se passe est dû au fait que le conteneur est à nouveau déclaré et qu'une fois rendu, il n'est pas mis à jour ? Honnêtement, je ne sais pas, j'apprécierais vraiment de l'aide <3

importer './App.css';
importer React depuis « react » ;
importer {useEffect, useState} depuis 'react' ;
importer des feux d'artifice depuis 'fireworks-js' ;

fonction App() {

  const delay = ms => new Promise(res => setTimeout(res, ms))

  const [compte, setCount] = useState(0);

  fonction handleClick() {
    setCount(compte+1)
    console.log('bouton enfoncé' + nombre);
  }

  useEffect(()=>{
    console.log('effet appelé' + nombre);
    const conteneur = document.getElementById('fireworks-container');
    const fireworks = new Fireworks(conteneur);
    feux d'artifice.launch(10);
    feux d'artifice.launch(20);
    faire une requête();

    fonction asynchrone makeRequest() {
      délai d'attente (200);
      feux d'artifice.launch(20);
      délai d'attente (300);
      feux d'artifice.launch(20);
    }
  }, [compter]);

  retour (
    <div className="Application">
      <h1 className = "text">Application Fireworks</h1>
      <button onClick={handleClick}>Redémarrer</button>
      <div id = 'fireworks-container' style = {{largeur : '100%', hauteur : '100vh'}}/>
    </div>
  );
}

exporter l'application par défaut ;

Je pensais que le feu d'artifice réapparaîtrait parce que j'en avais créé un nouveau et que je l'avais tiré ? J'ai l'impression que je dois créer l'objet fireworks en dehors de useEffect, mais cela ne fonctionne pas et me donne un tas d'erreurs.

Answer 1

J'ai créé deux blocs useEffect distincts, dont l'un initialise simplement les objets conteneur et feu d'artifice ! Merci pour l'aide de tous !

import './App.css';
import React, { useRef } from 'react';
import {useEffect, useState} from 'react';
import Fireworks from 'fireworks-js';

function App() {

  const delay = ms => new Promise(res => setTimeout(res, ms))

  const fireworks = useRef();

  useEffect(()=>{
    const container = document.getElementById('fireworks-container');
    fireworks.current = new Fireworks(container);
  }, []);

  const [count, setCount] = useState(0);

  function handleClick() {
    setCount(count+1)
    console.log('button pressed' + count);
  }

  useEffect(()=>{
    console.log('effect called' + count);
    fireworks.current.launch(10);
    fireworks.current.launch(20);
    makeRequest();

    async function makeRequest() {
      await delay(200);
      fireworks.current.launch(20);
      await delay(300);
      fireworks.current.launch(20);
    }
  }, [count]);

  return (
    <div className="App">
      <h1 className = "text">Fireworks App</h1>
      <button onClick={handleClick}>Restart</button>
      <div id = 'fireworks-container' style = {{width: '100%', height: '100vh'}}/>
    </div>
  );
}

export default App;