無法在useEffect中更新內容並進行渲染

Question

我正在嘗試製作一個網頁應用程序，一旦按下按鈕，就會發射一堆煙火。 它使用的是React，我試著使用useEffect鉤子，在ID變數更新後發射煙火。 當它在開始渲染時，它工作得很好，按照我想要的方式發射煙火，但是重新開始按鈕不起作用。第一次之後沒有顯示任何煙火。 透過使用console.log，我確保當按下按鈕並且計數變化時，確實調用了useEffect塊。我認為發生的情況是因為容器再次聲明，當重新渲染時它沒有更新？老實說我不知道，我真的很感謝一些幫助 <3

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

function App() {

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

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

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

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

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

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

export default App;

我以為煙火會再次出現，因為我創造了一個新的煙火並發射它？我覺得我需要在useEffect之外創建煙火對象，但是它不起作用並且給我一堆錯誤。

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;

#