首頁  >  問答  >  主體

無法在useEffect中更新內容並進行渲染

<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粉164942791P粉164942791455 天前550

全部回覆(1)我來回復

  • P粉921165181

    P粉9211651812023-08-15 09:11:27

    我建立了兩個獨立的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;


    #

    回覆
    0
  • 取消回覆