无法在useEffect中更新内容并进行渲染
P粉164942791
P粉164942791 2023-08-14 10:16:04
0
1
569
<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>
P粉164942791
P粉164942791

全部回复(1)
P粉921165181

我创建了两个独立的useEffect块,其中一个只是初始化容器和firework对象! 感谢大家的帮助!


import './App.css';
import React, { useRef } from 'react';
import {useEffect, useState} from 'react';
import Fireworks from 'fireworks-js';

function App() {

  const delay = ms => new Promise(res => setTimeout(res, ms))

  const fireworks = useRef();

  useEffect(()=>{
    const container = document.getElementById('fireworks-container');
    fireworks.current = new Fireworks(container);
  }, []);

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

  function handleClick() {
    setCount(count+1)
    console.log('button pressed' + count);
  }

  useEffect(()=>{
    console.log('effect called' + count);
    fireworks.current.launch(10);
    fireworks.current.launch(20);
    makeRequest();

    async function makeRequest() {
      await delay(200);
      fireworks.current.launch(20);
      await delay(300);
      fireworks.current.launch(20);
    }
  }, [count]);

  return (
    <div className="App">
      <h1 className = "text">Fireworks App</h1>
      <button onClick={handleClick}>Restart</button>
      <div id = 'fireworks-container' style = {{width: '100%', height: '100vh'}}/>
    </div>
  );
}

export default App;


热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板