사용 중인 콘텐츠를 업데이트할 수 없습니다.Effect 및 렌더링
P粉164942791
2023-08-14 10:16:04
<p>버튼을 누르면 불꽃놀이가 터지는 웹 앱을 만들려고 합니다.
React를 사용하고 있으며 ID 변수가 업데이트된 후 useEffect 후크를 사용하여 불꽃놀이를 시작하려고 합니다.
렌더링을 시작하면 제대로 작동하고 원하는 방식으로 불꽃놀이가 발생하지만 다시 시작 버튼이 작동하지 않습니다. 첫 번째 이후에는 불꽃 놀이가 표시되지 않았습니다.
console.log를 사용하여 버튼을 누르고 카운트가 변경되면 useEffect 블록이 실제로 호출되는지 확인했습니다. 컨테이너가 다시 선언되고 다시 렌더링될 때 업데이트되지 않기 때문에 무슨 일이 일어나고 있는 것 같아요? 솔직히 잘 모르겠습니다. 도움을 주시면 정말 감사하겠습니다 <3</p>
<pre class="brush:php;toolbar:false;">가져오기 './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>
);
}
기본 앱 내보내기;</pre>
<p>새로 불꽃놀이를 만들어서 쏘니까 또 불꽃놀이가 나올 줄 알았죠? useEffect 외부에서 불꽃놀이 개체를 만들어야 할 것 같지만 작동하지 않고 많은 오류가 발생합니다. </p>
두 개의 별도 useEffect 블록을 만들었습니다. 그 중 하나는 컨테이너와 불꽃 개체를 초기화하는 것뿐입니다! 모두의 도움에 감사드립니다!