Tidak dapat mengemas kini kandungan dalam useEffect dan render

Question

Saya cuba membuat apl web yang menyalakan sekumpulan bunga api sebaik sahaja butang ditekan. Ia menggunakan React dan saya cuba menggunakan cangkuk useEffect untuk menyalakan bunga api selepas pembolehubah ID dikemas kini. Apabila ia mula memaparkan ia berfungsi dengan baik dan menyalakan bunga api seperti yang saya mahu, tetapi butang mulakan semula tidak berfungsi. Tiada bunga api ditunjukkan selepas kali pertama. Dengan menggunakan console.log, saya memastikan bahawa apabila butang ditekan dan kiraan berubah, blok useEffect memang dipanggil. Saya fikir apa yang berlaku adalah kerana bekas itu diisytiharkan semula dan apabila dipaparkan semula ia tidak dikemas kini? Sejujurnya saya tidak tahu, sangat menghargai bantuan <3

import './App.css';
import React daripada 'react';
import {useEffect, useState} daripada 'react';
import Bunga Api daripada 'bunga api-js';

function App() {

  kelewatan const = ms => Janji baharu(res => setTimeout(res, ms))

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

  function handleClick() {
    setCount(count+1)
    console.log('butang ditekan' + kira);
  }

  useEffect(()=>{
    console.log('kesan dipanggil' + kiraan);
    bekas const = document.getElementById('bekas-bunga api');
    bunga api const = Bunga Api baru(bekas);
    bunga api.pelancaran(10);
    bunga api.pelancaran(20);
    makeRequest();

    fungsi async makeRequest() {
      menunggu kelewatan(200);
      bunga api.pelancaran(20);
      menunggu kelewatan(300);
      bunga api.pelancaran(20);
    }
  }, [kiraan]);

  kembali (
    <div className="App">
      <h1 className = "teks">Apl Bunga Api</h1>
      <butang onClick={handleClick}>Mulakan semula</button>
      <div id = gaya 'bekas bunga api' = {{lebar: '100%', tinggi: '100vh'}}/>
    </div>
  );
}

eksport Apl lalai;

Saya fikir bunga api akan muncul semula kerana saya mencipta yang baharu dan memecatnya? Saya rasa saya perlu mencipta objek bunga api di luar useEffect, tetapi ia tidak berfungsi dan memberi saya banyak ralat.

Answer 1

Saya mencipta dua blok useEffect yang berasingan, satu daripadanya hanya memulakan bekas dan objek bunga api! Terima kasih atas bantuan semua orang!

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;