Der Inhalt in useEffect und render kann nicht aktualisiert werden
P粉164942791
P粉164942791 2023-08-14 10:16:04
0
1
466

Ich versuche, eine Web-App zu erstellen, die auf Knopfdruck eine Reihe von Feuerwerkskörpern abfeuert. Es verwendet React und ich versuche, den useEffect-Hook zu verwenden, um ein Feuerwerk abzufeuern, nachdem die ID-Variable aktualisiert wurde. Wenn es mit dem Rendern beginnt, funktioniert es einwandfrei und feuert das Feuerwerk wie gewünscht ab, aber die Schaltfläche „Neustart“ funktioniert nicht. Nach dem ersten Mal wurde kein Feuerwerk mehr gezeigt. Durch die Verwendung von console.log habe ich sichergestellt, dass der useEffect-Block tatsächlich aufgerufen wird, wenn die Taste gedrückt wird und sich die Anzahl ändert. Ich denke, was passiert, weil der Container erneut deklariert wird und beim erneuten Rendern nicht aktualisiert wird? Ich weiß es ehrlich gesagt nicht, würde mich wirklich über Hilfe freuen <3

import './App.css'; import React aus 'react'; import {useEffect, useState} aus 'react'; Fireworks aus „fireworks-js“ importieren; Funktion App() { const Verzögerung = ms => new Promise(res => setTimeout(res, ms)) const [count, setCount] = useState(0); Funktion handleClick() { setCount(count+1) console.log('Taste gedrückt' + Anzahl); } useEffect(()=>{ console.log('effect aufgerufen' + count); const container = document.getElementById('fireworks-container'); const fireworks = new Fireworks(container); fireworks.launch(10); fireworks.launch(20); Anfrage stellen(); asynchrone Funktion makeRequest() { Warten auf Verzögerung (200); fireworks.launch(20); Warten auf Verzögerung (300); fireworks.launch(20); } }, [zählen]); zurückkehren ( 

Fireworks-App

); } Standard-App exportieren;

Ich dachte, das Feuerwerk würde wieder erscheinen, weil ich ein neues erstellt und abgefeuert habe? Ich habe das Gefühl, dass ich das Feuerwerksobjekt außerhalb von useEffect erstellen muss, aber es funktioniert nicht und führt zu einer Reihe von Fehlern.

P粉164942791
P粉164942791

Antworte allen (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 ( 

Fireworks App

); } export default App;


    Neueste Downloads
    Mehr>
    Web-Effekte
    Quellcode der Website
    Website-Materialien
    Frontend-Vorlage
    Über uns Haftungsausschluss Sitemap
    Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!