useEffect およびレンダリングのコンテンツを更新できません
<p>ボタンが押されると大量の花火を打ち上げる Web アプリを作成しようとしています。
React を使用しており、ID 変数が更新された後に useEffect フックを使用して花火を打ち上げようとしています。
レンダリングを開始すると正常に動作し、希望通りに花火が打ち上げられますが、再起動ボタンが機能しません。初回以降は花火は打ち上げられなかった。
console.log を使用して、ボタンが押されてカウントが変化したときに useEffect ブロックが実際に呼び出されることを確認しました。何が起こっているのかというと、コンテナが再度宣言され、再レンダリングされたときに更新されないためですか?正直わかりません。助けていただければ幸いです <3
<pre class="brush:php;toolbar:false;">import './App.css';
「react」から React をインポートします。
'react' から {useEffect, useState} をインポートします。
「fireworks-js」から Fireworks をインポートします。
関数 App() {
const late = ms => new Promise(res => setTimeout(res, ms))
const [カウント, setCount] = useState(0);
関数ハンドルクリック() {
setCount(カウント1)
console.log(「ボタンが押された」回数);
}
useEffect(()=>{
console.log('呼び出されたエフェクト' count);
const コンテナ = document.getElementById('花火コンテナ');
const 花火 = 新しい花火(コンテナ);
花火.打ち上げ(10);
花火.打ち上げ(20);
makeRequest();
非同期関数 makeRequest() {
遅延を待ちます(200);
花火.打ち上げ(20);
遅延を待ちます(300);
花火.打ち上げ(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>
