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 (  Application Fireworks
   
 ); } 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.

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 (