React动态标题切换功能失效求助：始终显示数组首个元素

问题根源 #

你的代码存在两个核心问题：

1. titlep2Array 仅在初始化时生成一次，后续 change 函数更新 titlep2 时，titlep2Array 不会自动同步更新
2. 普通变量的更新无法触发组件重新渲染，导致 AnimatedLetters 始终接收初始的数组值

修复代码（React 环境） #

如果你的项目基于 React，改用状态管理和副作用钩子来实现：

import { useState, useEffect } from 'react';

const projectsTitleKeyWords = ['responsible', 'meaningful', 'beautiful'];

const ExperiencePage = () => {
  // 用 useState 管理要切换的文本，初始值设为数组第一个元素
  const [currentKeyword, setCurrentKeyword] = useState(projectsTitleKeyWords[0]);
  let index = 0;

  useEffect(() => {
    // 用 setInterval 实现每秒切换
    const intervalId = setInterval(() => {
      index = (index + 1) % projectsTitleKeyWords.length;
      setCurrentKeyword(projectsTitleKeyWords[index]);
    }, 1000);

    // 组件卸载时清除定时器，避免内存泄漏
    return () => clearInterval(intervalId);
  }, []);

  const titlep1 = 'I creat ';
  const titlep1Array = titlep1.split('');
  // 每次渲染时根据最新的 currentKeyword 生成数组
  const titlep2Array = currentKeyword.split('');
  const titlep3 = ' projects';
  const titlep3Array = titlep3.split('');

  return (
    <div>
      {/* 其他页面内容 */}
      <AnimatedLetters
        letterClass={letterClass}
        strArray={titlep2Array}
        idx={15}
        id='to-change'
      />
      {/* 其他页面内容 */}
    </div>
  );
};

关键修改点 #

• 用 useState 管理状态：currentKeyword 的更新会触发组件重新渲染，确保 AnimatedLetters 能拿到最新的数组
• 改用 setInterval：比嵌套 setTimeout 更简洁，且便于清理
• 实时生成数组：每次组件渲染时，根据最新的关键词生成 titlep2Array，保证数组内容与当前关键词同步

非 React 环境的补充说明 #

如果是纯前端项目（无框架），需要在 change 函数中手动更新 titlep2Array 并重新渲染 AnimatedLetters 组件，例如：

const projectsTitleKeyWords = ['responsible', 'meaningful', 'beautiful']
let index = 0
const animatedLettersEl = document.getElementById('to-change');

const change = () => { 
  const currentKeyword = projectsTitleKeyWords[index]
  const titlep2Array = currentKeyword.split('')
  // 调用组件的更新方法，假设组件有 update 函数
  animatedLettersEl.update(titlep2Array)
  index = (index + 1) % projectsTitleKeyWords.length
  setTimeout(change, 1000)
}
change()

内容的提问来源于stack exchange，提问作者Abdellah Slimani