Wiederholen Sie den useEffect der Namen im Array
P粉775788723
P粉775788723 2023-08-14 18:14:44
0
1
458
<p>Ich habe diese Übung auf dieser Website gefunden. Ich teste sie, da ich auch Hooks in React lerne. </p> <p>Ich verstehe nicht, warum die Ausführung von useEffect stoppt, wenn Sie einen Namen eingeben, der mit einem bereits im Array vorhandenen identisch ist. </p> <p>Sollte es nicht doppelte Namen überspringen und mit dem nächsten fortfahren? Oder mache ich etwas falsch? </p> <pre class="brush:php;toolbar:false;">let users = ['Oliver', 'Thomas', 'George', 'George', 'William'] Standardfunktion App() exportieren { const [index, setIndex] = useState(0); console.log('RENDER'); useEffect(() => { setTimeout(() => setIndex(index => index + 1), 1000) console.log('Hallo ' + Benutzer[Index]); console.log('Nebeneffekt LÄUFT!'); if (index === Benutzer.Länge - 1) { zurückkehren } }, [Benutzer[Index]]) }</pre> <p><br /></p>
P粉775788723
P粉775788723

Antworte allen(1)
P粉034571623

在循环中的副作用:你在useEffect中使用setTimeout和setIndex的方式可能会导致意外的行为。useEffect在每次渲染后执行,并且在setTimeout回调中直接使用index状态可能会引起问题,因为闭包在创建回调时会捕获状态值。

访问数组元素:你试图使用索引访问users数组的元素,但由于useEffect和延迟的异步性质,可能会超出数组的范围。

const [index, setIndex] = useState(0);

  useEffect(() => {
    console.log('RENDER');
    console.log('副作用运行!');
    
    if (index >= users.length) {
      return;
    }

    const timeoutId = setTimeout(() => {
      console.log('你好 ' + users[index]);
      setIndex(index + 1);
    }, 1000);

    return () => clearTimeout (timeoutId);
  }, [index]);
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage