사용 중인 콘텐츠를 업데이트할 수 없습니다.Effect 및 렌더링

Question

버튼을 누르면 불꽃놀이가 터지는 웹 앱을 만들려고 합니다. React를 사용하고 있으며 ID 변수가 업데이트된 후 useEffect 후크를 사용하여 불꽃놀이를 시작하려고 합니다. 렌더링을 시작하면 제대로 작동하고 원하는 방식으로 불꽃놀이가 발생하지만 다시 시작 버튼이 작동하지 않습니다. 첫 번째 이후에는 불꽃 놀이가 표시되지 않았습니다. console.log를 사용하여 버튼을 누르고 카운트가 변경되면 useEffect 블록이 실제로 호출되는지 확인했습니다. 컨테이너가 다시 선언되고 다시 렌더링될 때 업데이트되지 않기 때문에 무슨 일이 일어나고 있는 것 같아요? 솔직히 잘 모르겠습니다. 도움을 주시면 정말 감사하겠습니다 <3

가져오기 './App.css';
'반응'에서 반응을 가져옵니다;
'반응'에서 {useEffect, useState}를 가져옵니다.
'fireworks-js'에서 Fireworks를 가져옵니다.

함수 앱() {

  const 지연 = ms => new Promise(res => setTimeout(res, ms))

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

  함수 핸들클릭() {
    세트카운트(카운트+1)
    console.log('버튼을 눌렀습니다' + count);
  }

  useEffect(()=>{
    console.log('효과 호출' + 개수);
    const 컨테이너 = document.getElementById('fireworks-container');
    const 불꽃놀이 = 새 불꽃놀이(컨테이너);
    Fireworks.launch(10);
    Fireworks.launch(20);
    makeRequest();

    비동기 함수 makeRequest() {
      지연 대기(200);
      Fireworks.launch(20);
      지연 대기(300);
      Fireworks.launch(20);
    }
  }, [세다]);

  반품 (
    <div className="앱">
      <h1 className = "text">Fireworks 앱</h1>
      <button onClick={handleClick}>다시 시작</button>
      <div id = 'fireworks-container' style = {{width: '100%', height: '100vh'}}/>
    </div>
  );
}

기본 앱 내보내기;

새로 불꽃놀이를 만들어서 쏘니까 또 불꽃놀이가 나올 줄 알았죠? useEffect 외부에서 불꽃놀이 개체를 만들어야 할 것 같지만 작동하지 않고 많은 오류가 발생합니다.

Answer 1

두 개의 별도 useEffect 블록을 만들었습니다. 그 중 하나는 컨테이너와 불꽃 개체를 초기화하는 것뿐입니다! 모두의 도움에 감사드립니다!

으아악