javascript - 使用 setTimeout react 嵌套 map 顺序渲染

Question

我的目标是遍历一个字符数组并在给定单词的每个字母上结束。我的代码当前一次显示所有这些元素，但我希望它们按顺序显示。这是我目前拥有的:
Current view
我想返回以 h 结尾的数组(稍等片刻)、以 e 结尾的数组(稍等片刻)等等。我无法弄清楚将 arrayIndex 附加到嵌套 map 。DisplayName.js

import React, { useState, useEffect } from "react";

const DisplayName = ({ characters, first }) => {
  const [charIndex, setCharIndex] = useState(0);
  const [arrayIndex, setArrayIndex] = useState(0);
  
  let arrayContainer = [];

  first.map((letter, i) => {
    arrayContainer.push([]);
    arrayContainer[i].push(characters.concat(first[i]));
    return arrayContainer;
  });

// I can't figure out how to attach arrayIndex here. I am
// also not using j currently, but kept it for now in case I need
// a key for the return statements.
  const fullList = arrayContainer.map((letterArr, j) => {
    return letterArr.map(char => {
        return (char[charIndex])
      })
  });

  useEffect(() => {
    let timer;
    let secondTimer;

    if (charIndex < characters.length) {
      timer = setTimeout(() => {
        setCharIndex(charIndex + 1)
      }, 75)
    }

    if (arrayIndex < first.length - 1) {
      secondTimer = setTimeout(() => {
        setArrayIndex(arrayIndex + 1)
      }, 75)
    }

    return () => {
      clearTimeout(timer);
      clearTimeout(secondTimer);
    };
  }, [charIndex, characters, arrayIndex, first]);

  return (
    <div>{fullList}</div>
  )
};

export default DisplayName;

App.js

import React from 'react';
import DisplayName from './DisplayName';
import './App.css';

function App() {
    const first = 'hello'.split('');
    const funChars = [
      '⏀', '⎷', '⌮', '⋙', '⊠', '⎳', '⍼',
     '⍣', '╈', '╳', '☀', '★', '☍',  'ↂ','▅'];

  return (
    <div className="glow" style={{ minHeight: '100vh'}}>
      <span style={{ letterSpacing: 12}}><DisplayName first={first} characters={funChars}/></span>
    </div>
  );
}

export default App;

我也尝试过类似 const [rendered, setRendered] = useState(false);没有成功，我尝试将其附加到 j key 。

Answer 1

如果我理解你的问题，你想迭代 first字符串到一个索引并在迭代字符串时显示一个“滚动”有趣的字符。
直觉上我认为更容易想到切片first的前面字符串到索引，并附加有趣的字符。


迭代
指数
text.substring(0, index)
结果)


0
0
“”
'⏀'、'⎷'、'⌮'、...

1
1
“H”
'h⏀'，'h⎷'，'h⌮'，...

2
2
“他”
“他⏀”、“他⎷”、“他⌮”、...

3
3
“哎呀”
'hel⏀'，'hel⎷'，'hel⌮'，...

4
4
“ hell ”
' hell ⏀'，' hell ⎷'，' hell ⌮'，...

5
5
“你好”
'你好'


棘手的问题是使用两个单独的计时器/间隔来增加 first 的索引。字符串并增加有趣字符数组的索引。这是我想出的解决方案。

使用 React ref 来保存滚动有趣 Angular 色的间隔计时器引用。

单例 useEffect钩子(Hook)开始“滚动”有趣的字符索引在间隔上递增。在 first 上递增时开始超时字符串 char 数组，如果还有要迭代的长度，则将另一个超时排入队列，否则运行清理函数以清除计时器和状态。

切片first直到索引 arrayIndex 的字符串并有条件地附加一个“滚动”有趣的 Angular 色。

代码:

const DisplayName = ({ characters, first }) => {
  const charTimerRef = useRef(null);
  const [charIndex, setCharIndex] = useState(null);
  const [arrayIndex, setArrayIndex] = useState(0);

  useEffect(() => {
    let timerId;
    const cleanupTimerRef = () => {
      setCharIndex(null);
      clearInterval(charTimerRef.current);
      charTimerRef.current = null;
    };

    if (!charTimerRef.current) {
      setCharIndex(0);
      charTimerRef.current = setInterval(() => {
        setCharIndex((i) => i + 1);
      }, 75);
    }

    if (arrayIndex < first.length) {
      timerId = setTimeout(() => {
        setArrayIndex((i) => i + 1);
      }, 1000);
    } else {
      cleanupTimerRef();
    }

    return () => {
      clearTimeout(timerId);
      cleanupTimerRef();
    };
  }, [arrayIndex, first]);

  const fullList =
    first.substring(0, arrayIndex) +
    (charIndex ? characters[charIndex % characters.length] : "");

  return <div>{fullList}</div>;
};

演示