NextJS中typewriter-effect控制台多次打印及索引异常问题排查

• 页面加载时，determineArticle函数触发3次控制台打印，同时currentWordIndex值异常递增
• 控制台日志显示索引值比预期大1，不想用"页面加载后将索引减1"这种不优雅的临时方案
• 基于NextJS使用typewriter-effect模块，已搭建最小复现场景

代码示例 #

JavaScript逻辑

const words = ['innovative<br/>thinker', 'creative<br/>mind', 'web<br/>designer'];

const determineArticle = () => {
  const word = words[currentWordIndex];
  console.log(word);
  const vowels = ['a', 'e', 'i', 'o', 'u'];
  const firstLetter = word.toLowerCase()[0];
  console.log(vowels.includes(firstLetter) ? 'an' : 'a');
};

const [currentWordIndex, setCurrentWordIndex] = useState(0);

useEffect(() => {
  if (Number.isInteger(currentWordIndex)) determineArticle();
}, [currentWordIndex]);

const typeWord = async (typewriter) => {
  for (let i = 0, len = words.length; i < len; i++) {
    await new Promise((resolve) => {
      typewriter
        .callFunction(() => {
          if (currentWordIndex == 15) setCurrentWordIndex(0);
          setCurrentWordIndex((prevIndex) => prevIndex + 0.5);
          resolve();
        })
        .typeString(words[i])
        .pauseFor(2500)
        .deleteAll()
        .start();
    });
  }
};

JSX组件

<TypeWriter
  options={{
    autoStart: true,
    loop: true,
  }}
  onInit={(typewriter) => {
    typeWord(typewriter);
  }}
/>

视觉示例 #

内容的提问来源于stack exchange，提问作者Mark dG