无法在useEffect中更新内容并进行渲染
P粉164942791
2023-08-14 10:16:04
<p>我正在尝试制作一个网页应用程序,一旦按下按钮,就会发射一堆烟花。
它使用的是React,我试图使用useEffect钩子,在ID变量更新后发射烟花。
当它在开始渲染时,它工作得很好,按照我想要的方式发射烟花,但是重新开始按钮不起作用。第一次之后没有显示任何烟花。
通过使用console.log,我确保当按下按钮并且计数变化时,确实调用了useEffect块。我认为发生的情况是因为容器再次声明,当重新渲染时它没有更新?老实说我不知道,真的很感谢一些帮助 <3</p>
<pre class="brush:php;toolbar:false;">import './App.css';
import React from 'react';
import {useEffect, useState} from 'react';
import Fireworks from 'fireworks-js';
function App() {
const delay = ms => new Promise(res => setTimeout(res, ms))
const [count, setCount] = useState(0);
function handleClick() {
setCount(count+1)
console.log('button pressed' + count);
}
useEffect(()=>{
console.log('effect called' + count);
const container = document.getElementById('fireworks-container');
const fireworks = new Fireworks(container);
fireworks.launch(10);
fireworks.launch(20);
makeRequest();
async function makeRequest() {
await delay(200);
fireworks.launch(20);
await delay(300);
fireworks.launch(20);
}
}, [count]);
return (
<div className="App">
<h1 className = "text">Fireworks App</h1>
<button onClick={handleClick}>重新开始</button>
<div id = 'fireworks-container' style = {{width: '100%', height: '100vh'}}/>
</div>
);
}
export default App;</pre>
<p>我原以为烟花会再次出现,因为我创建了一个新的烟花并发射它?我觉得我需要在useEffect之外创建烟花对象,但是它不起作用并且给我一堆错误。</p>
我创建了两个独立的useEffect块,其中一个只是初始化容器和firework对象! 感谢大家的帮助!