React 数组状态更新不一致

【问题标题】：React Array State Update Not ConsistantReact 数组状态更新不一致
【发布时间】：2022-01-11 18:39:57
【问题描述】：

遇到一个奇怪的问题，希望有人能提供帮助。我试图通过一系列单词和标点符号“迭代”，以使滚动对话出现。我有这个工作，除了当我尝试将它推送到 React 时，它只是……失控了。这是我所拥有的：


export default function DialogueBox(params){

    const params="The story, characters, and events, in this game are entirely fictional. Any similarities to actual people, places and events are entirely coicidental.";

    let dialogueValue = [];

    let [dialogue, setDialogue] = useState([]);
  
    let letterArray = params.text.split(/\b/);

    const handleChangeValue = text => {
       
                const updatedLettersArray = [...dialogueValue, text];
                console.log('updated: ' + updatedLettersArray);
                // setDialogue(oldArray=>[...oldArray,updatedLettersArray]);
                
    }

    return (
        <div className="dialogueBox">
            {letterArray.forEach(function(element,index){
                setTimeout(
                    function(){
                        handleChangeValue(element);
                        dialogueValue.push(element);
                    }, index * 500
                );
            })}
            <p>{dialogue}</p>
        </div>
    )
}

这是正确的控制台日志：

updated: The DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The, ,story DialogueBox.js:15
updated: The, ,story,, DialogueBox.js:15
updated: The, ,story,, ,characters DialogueBox.js:15
updated: The, ,story,, ,characters,, DialogueBox.js:15
updated: The, ,story,, ,characters,, ,and DialogueBox.js:15
updated: The, ,story,, ,characters,, ,and, DialogueBox.js:15
updated: The, ,story,, ,characters,, ,and, ,events DialogueBox.js:15
updated: The, ,story,, ,characters,, ,and, ,events,, DialogueBox.js:15
updated: The, ,story,, ,characters,, ,and, ,events,, ,in DialogueBox.js:15
updated: The, ,story,, ,characters,, ,and, ,events,, ,in, DialogueBox.js:15
updated: The, ,story,, ,characters,, ,and, ,events,, ,in, ,this DialogueBox.js:15
updated: The, ,story,, ,characters,, ,and, ,events,, ,in, ,this, DialogueBox.js:15
updated: The, ,story,, ,characters,, ,and, ,events,, ,in, ,this, ,game DialogueBox.js:15
updated: The, ,story,, ,characters,, ,and, ,events,, ,in, ,this, ,game, DialogueBox.js:15
updated: The, ,story,, ,characters,, ,and, ,events,, ,in, ,this, ,game, ,are DialogueBox.js:15
updated: The, ,story,, ,characters,, ,and, ,events,, ,in, ,this, ,game, ,are, DialogueBox.js:15
updated: The, ,story,, ,characters,, ,and, ,events,, ,in, ,this, ,game, ,are, ,entirely DialogueBox.js:15
updated: The, ,story,, ,characters,, ,and, ,events,, ,in, ,this, ,game, ,are, ,entirely, DialogueBox.js:15
updated: The, ,story,, ,characters,, ,and, ,events,, ,in, ,this, ,game, ,are, ,entirely, ,fictional DialogueBox.js:15
updated: The, ,story,, ,characters,, ,and, ,events,, ,in, ,this, ,game, ,are, ,entirely, ,fictional,. DialogueBox.js:15
updated: The, ,story,, ,characters,, ,and, ,events,, ,in, ,this, ,game, ,are, ,entirely, ,fictional,. ,Any DialogueBox.js:15
updated: The, ,story,, ,characters,, ,and, ,events,, ,in, ,this, ,game, ,are, ,entirely, ,fictional,. ,Any, DialogueBox.js:15
updated: The, ,story,, ,characters,, ,and, ,events,, ,in, ,this, ,game, ,are, ,entirely, ,fictional,. ,Any, ,similarities DialogueBox.js:15
updated: The, ,story,, ,characters,, ,and, ,events,, ,in, ,this, ,game, ,are, ,entirely, ,fictional,. ,Any, ,similarities, DialogueBox.js:15
updated: The, ,story,, ,characters,, ,and, ,events,, ,in, ,this, ,game, ,are, ,entirely, ,fictional,. ,Any, ,similarities, ,to DialogueBox.js:15
updated: The, ,story,, ,characters,, ,and, ,events,, ,in, ,this, ,game, ,are, ,entirely, ,fictional,. ,Any, ,similarities, ,to, DialogueBox.js:15
updated: The, ,story,, ,characters,, ,and, ,events,, ,in, ,this, ,game, ,are, ,entirely, ,fictional,. ,Any, ,similarities, ,to, ,actual DialogueBox.js:15
updated: The, ,story,, ,characters,, ,and, ,events,, ,in, ,this, ,game, ,are, ,entirely, ,fictional,. ,Any, ,similarities, ,to, ,actual, DialogueBox.js:15
updated: The, ,story,, ,characters,, ,and, ,events,, ,in, ,this, ,game, ,are, ,entirely, ,fictional,. ,Any, ,similarities, ,to, ,actual, ,people DialogueBox.js:15
updated: The, ,story,, ,characters,, ,and, ,events,, ,in, ,this, ,game, ,are, ,entirely, ,fictional,. ,Any, ,similarities, ,to, ,actual, ,people,, DialogueBox.js:15
updated: The, ,story,, ,characters,, ,and, ,events,, ,in, ,this, ,game, ,are, ,entirely, ,fictional,. ,Any, ,similarities, ,to, ,actual, ,people,, ,places DialogueBox.js:15
updated: The, ,story,, ,characters,, ,and, ,events,, ,in, ,this, ,game, ,are, ,entirely, ,fictional,. ,Any, ,similarities, ,to, ,actual, ,people,, ,places, DialogueBox.js:15
updated: The, ,story,, ,characters,, ,and, ,events,, ,in, ,this, ,game, ,are, ,entirely, ,fictional,. ,Any, ,similarities, ,to, ,actual, ,people,, ,places, ,and DialogueBox.js:15
updated: The, ,story,, ,characters,, ,and, ,events,, ,in, ,this, ,game, ,are, ,entirely, ,fictional,. ,Any, ,similarities, ,to, ,actual, ,people,, ,places, ,and, DialogueBox.js:15
updated: The, ,story,, ,characters,, ,and, ,events,, ,in, ,this, ,game, ,are, ,entirely, ,fictional,. ,Any, ,similarities, ,to, ,actual, ,people,, ,places, ,and, ,events DialogueBox.js:15
updated: The, ,story,, ,characters,, ,and, ,events,, ,in, ,this, ,game, ,are, ,entirely, ,fictional,. ,Any, ,similarities, ,to, ,actual, ,people,, ,places, ,and, ,events, DialogueBox.js:15
updated: The, ,story,, ,characters,, ,and, ,events,, ,in, ,this, ,game, ,are, ,entirely, ,fictional,. ,Any, ,similarities, ,to, ,actual, ,people,, ,places, ,and, ,events, ,are DialogueBox.js:15
updated: The, ,story,, ,characters,, ,and, ,events,, ,in, ,this, ,game, ,are, ,entirely, ,fictional,. ,Any, ,similarities, ,to, ,actual, ,people,, ,places, ,and, ,events, ,are, DialogueBox.js:15
updated: The, ,story,, ,characters,, ,and, ,events,, ,in, ,this, ,game, ,are, ,entirely, ,fictional,. ,Any, ,similarities, ,to, ,actual, ,people,, ,places, ,and, ,events, ,are, ,entirely DialogueBox.js:15
updated: The, ,story,, ,characters,, ,and, ,events,, ,in, ,this, ,game, ,are, ,entirely, ,fictional,. ,Any, ,similarities, ,to, ,actual, ,people,, ,places, ,and, ,events, ,are, ,entirely, DialogueBox.js:15
updated: The, ,story,, ,characters,, ,and, ,events,, ,in, ,this, ,game, ,are, ,entirely, ,fictional,. ,Any, ,similarities, ,to, ,actual, ,people,, ,places, ,and, ,events, ,are, ,entirely, ,coicidental DialogueBox.js:15
updated: The, ,story,, ,characters,, ,and, ,events,, ,in, ,this, ,game, ,are, ,entirely, ,fictional,. ,Any, ,similarities, ,to, ,actual, ,people,, ,places, ,and, ,events, ,are, ,entirely, ,coicidental,.

但是，如果我取消注释该行

// setDialogue(oldArray=>[...oldArray,updatedLettersArray]);

会发生以下情况：

updated: The 94 DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The 3 DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The 2 DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The 2 DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The 2 DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The 2 DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The 2 DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The 2 DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The 2 DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The 2 DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The 2 DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The 2 DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The 2 DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The 2 DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, 2 DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The 2 DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, 3 DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, 2 DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, 2 DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, 3 DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, 2 DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, 2 DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, 3 DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, 2 DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, 3 DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, 2 DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, 2 DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, 2 DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, ,story DialogueBox.js:15
updated: The, 2 DialogueBox.js:15
updated: The, ,story DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The, ,story DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, ,story DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The, ,story DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The, ,story DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, ,story DialogueBox.js:15
updated: The, 2 DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The, ,story DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, ,story DialogueBox.js:15
updated: The, 2 DialogueBox.js:15
updated: The, ,story DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, 2 DialogueBox.js:15
updated: The, ,story DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The, ,story DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, ,story DialogueBox.js:15
updated: The, 2 DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, ,story DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The, ,story DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The, ,story DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The, ,story DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, ,story DialogueBox.js:15
updated: The, 2 DialogueBox.js:15
updated: The, ,story DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The, ,story DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, ,story DialogueBox.js:15
updated: The, 2 DialogueBox.js:15
updated: The, ,story DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The, ,story DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The, ,story DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, ,story DialogueBox.js:15
updated: The, 2 DialogueBox.js:15
updated: The, ,story DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The, ,story DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, ,story DialogueBox.js:15
updated: The, 2 DialogueBox.js:15
updated: The, ,story DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The, ,story DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The, ,story DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The, ,story DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The, ,story DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The, ,story DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The, ,story DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, ,story DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The, ,story DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The, ,story DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, ,story DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The, ,story DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, ,story DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The, ,story DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, ,story DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The, ,story DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, ,story DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The, ,story DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, ,story DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, ,story DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The, ,story DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, ,story DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The, ,story DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, ,story DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The, ,story DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, ,story DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The, ,story DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The, ,story DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The, ,story DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The, ,story DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The, ,story DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The, ,story DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The, ,story DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, ,story DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The, ,story DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The, ,story DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, ,story DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The, ,story DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The, ,story DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The, ,story 2 DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, ,story DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The, ,story DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, ,story DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The, ,story DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, ,story DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, ,story 3 DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The, ,story 3 DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, ,story 2 DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The, ,story DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, ,story DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The, ,story DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The, ,story 2 DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The, ,story DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The DialogueBox.js:15
updated: The, ,story DialogueBox.js:15
updated: The, DialogueBox.js:15
updated: The, ,story

基本上只是不停地重复自己。我很肯定我在这里遗漏了一些明显的东西，但我很茫然！谢谢大家的帮助

【问题讨论】：

  • 您将参数命名为params，然后还声明一个名为params 的变量是否有原因？
  • 是的，这是一个组件，我想要一些测试数据供人们查看。该行不在实际程序中。

标签： javascript reactjs react-hooks


【解决方案1】：

使用setInterval 和index 来跟踪位置。在这里查看示例https://codesandbox.io/s/bold-wind-sq8lb?file=/src/App.js:

import { useEffect, useState } from "react";

export default function App() {
  const sentence =
    "The story, characters, and events, in this game are entirely fictional. Any similarities to actual people, places and events are entirely coicidental.";

  const [dialogue, setDialogue] = useState("");
  const [index, setIndex] = useState(0);
  const letterArray = sentence.split(/\b/);

  const handleChangeValue = () => {
    if (letterArray[index] !== undefined) {
      setDialogue((dialogue) => dialogue + letterArray[index]);
    }
  };

  useEffect(() => {
    // update the dialogue here
    const interval = setInterval(() => {
      if (index < letterArray.length) {
        setIndex((index) => index + 1);
      }
    }, 100);
    return () => clearInterval(interval);
  });

  useEffect(() => {
    // update the dialogue here
    handleChangeValue();
    console.log(`New dialogue: ${dialogue}`);
  }, [index]);

  return (
    <div className="App">
      <p>{dialogue}</p>
    </div>
  );
}

【讨论】：

  • 非常感谢 ninjadave。这是完美的，正是我所需要的。
  • @sylargaf 不客气
【解决方案2】：

不要在 React 组件返回中直接使用 setTimeout，它会在 Javascript 运行时设置大量计时器并且永远不会被回收。

如果 setTimeout 甚至 setInterval 是您所需要的，那么用 useEffect 将它们包装起来就可以了

通过猜测您要执行的操作，这是一个示例代码。它会每 0.5 秒在屏幕上显示一个单词，直到 params 结束

export default function DialogueBox(params){

  const params = "The story, characters, and events, in this game are entirely fictional. Any similarities to actual people, places and events are entirely coicidental.";
  const letters = params.split(/\b/)

  const [dialogue, setDialogue] = useState([]);

  useEffect(() => {
    const timers = []

    letters.forEach((letter, index) => {
      timers.push(
        setTimeout(() => {
          console.log(`Display at 500*${index} ms: ${letter}`)
          setDialogue(originDialogue => [...originDialogue, letter])
        }, 500*index)
      )
    })

    return () => timers.map((timer) => clearTimeout(timer))  // clean up timers to prevent memory leak
  }, [params]) // params here as dependency of useEffect, see offical document for useEffect for detail

  return (
    <div className="dialogueBox">
      {dialogue.map((letter) => (
        <p>{letter}</p>
      ))}
    </div>
  )
}

【讨论】：

  • 哎呀！做到了。非常感谢。我知道 useEffect 是我需要去的地方，但无法以正确的方式牵引它。谢谢！！
  • 不客气~
猜你喜欢
  • 2021-01-14
  • 2020-10-19
  • 2020-09-06
  • 1970-01-01
  • 2020-05-26
  • 1970-01-01
  • 1970-01-01
  • 2019-06-13
  • 2023-01-17
相关资源
最近更新 更多
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode