Der Inhalt in useEffect und render kann nicht aktualisiert werden

Question

Ich versuche, eine Web-App zu erstellen, die auf Knopfdruck eine Reihe von Feuerwerkskörpern abfeuert. Es verwendet React und ich versuche, den useEffect-Hook zu verwenden, um ein Feuerwerk abzufeuern, nachdem die ID-Variable aktualisiert wurde. Wenn es mit dem Rendern beginnt, funktioniert es einwandfrei und feuert das Feuerwerk wie gewünscht ab, aber die Schaltfläche „Neustart“ funktioniert nicht. Nach dem ersten Mal wurde kein Feuerwerk mehr gezeigt. Durch die Verwendung von console.log habe ich sichergestellt, dass der useEffect-Block tatsächlich aufgerufen wird, wenn die Taste gedrückt wird und sich die Anzahl ändert. Ich denke, was passiert, weil der Container erneut deklariert wird und beim erneuten Rendern nicht aktualisiert wird? Ich weiß es ehrlich gesagt nicht, würde mich wirklich über Hilfe freuen <3

import './App.css';
import React aus 'react';
import {useEffect, useState} aus 'react';
Fireworks aus „fireworks-js“ importieren;

Funktion App() {

  const Verzögerung = ms => new Promise(res => setTimeout(res, ms))

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

  Funktion handleClick() {
    setCount(count+1)
    console.log('Taste gedrückt' + Anzahl);
  }

  useEffect(()=>{
    console.log('effect aufgerufen' + count);
    const container = document.getElementById('fireworks-container');
    const fireworks = new Fireworks(container);
    fireworks.launch(10);
    fireworks.launch(20);
    Anfrage stellen();

    asynchrone Funktion makeRequest() {
      Warten auf Verzögerung (200);
      fireworks.launch(20);
      Warten auf Verzögerung (300);
      fireworks.launch(20);
    }
  }, [zählen]);

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

Standard-App exportieren;

Ich dachte, das Feuerwerk würde wieder erscheinen, weil ich ein neues erstellt und abgefeuert habe? Ich habe das Gefühl, dass ich das Feuerwerksobjekt außerhalb von useEffect erstellen muss, aber es funktioniert nicht und führt zu einer Reihe von Fehlern.

Answer 1

我创建了两个独立的useEffect块，其中一个只是初始化容器和firework对象！ 感谢大家的帮助！

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;