버튼을 누르면 불꽃놀이가 터지는 웹 앱을 만들려고 합니다. 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); } }, [세다]); 반품 (); } 기본 앱 내보내기;Fireworks 앱
새로 불꽃놀이를 만들어서 쏘니까 또 불꽃놀이가 나올 줄 알았죠? useEffect 외부에서 불꽃놀이 개체를 만들어야 할 것 같지만 작동하지 않고 많은 오류가 발생합니다.
두 개의 별도 useEffect 블록을 만들었습니다. 그 중 하나는 컨테이너와 불꽃 개체를 초기화하는 것뿐입니다! 모두의 도움에 감사드립니다!