React State无法正确更新具有间隔的数组

如何解决React State无法正确更新具有间隔的数组

我正在尝试使用JS制作简单的动画：我想在一段时间内将一系列标题字母随机化，并在超时后将标题基本上设置为公司标题。

这是我到目前为止编写的代码：

const alphabet = ["A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z","~","&","|","^","ç","@","]","[","{","}","ù","*","µ","¤","$","£","€","°",")","(","+","-","/","<",">","²","`","é","è","1","2","3","4","5","6","7","8","9","0"];

const randomFromAlphabet = () => alphabet[(Math.floor(Math.random() * alphabet.length))];
const companyTitle = ['C','U','I','R','C','K'];

const AboutUs = () => {
  const [title,setTitle] = useState(Array.from({ length: companyTitle.length },() => randomFromAlphabet()));
  const [intervals,setIntervals] = useState([]);

  const letterRandomize = () => {
    const generatedIntervals = Array.from({ length: title.length },(_,index) => {
      return setInterval(() => {
        const arrayTitle = Array.from(title);
        arrayTitle[index] = randomFromAlphabet();
        setTitle(arrayTitle);
      },350 * (index + 1));
    });
    setIntervals(generatedIntervals);
  };

  useEffect(() => {
    letterRandomize();
    setTimeout(() => {
      for (var i = 0; i < companyTitle.length; i++) {
        clearInterval(intervals[i]);
        const newTitle = [...title];
        newTitle[i] = companyTitle[i];
        setTitle(newTitle);
      }
    },3000)
  },[]);

我知道这不是很好的书，这是因为我试图理解问题所在。

我遇到了两个问题：第一个是随机字母的更新： 我注意到，每次更新数组的一个字母时，其他字母都返回原始字母。 因此，例如，如果我们有“ CUIRCK”，并且在一次更新后又有“ CAIRCK”，而在另一次更新后，第二个字母又返回到“ U”，例如“ CUIRCB”。

第二个问题是我无法清除间隔。我已经创建了6个不同的时间间隔，并将它们置于我的状态，这不是我做错的事情。

解决方法

刚刚创建了一个沙盒，可以解决您的问题。间隔内的状态可能很棘手，您应该避免这种情况。 SetState正在异步运行，因为setInterval还会在一个间隔内运行函数异步，因此您所指的状态可能尚未更新为所需的值。我希望我能很好地解释自己。

https://codesandbox.io/s/randomized-title-oozo6