React中使用setTimeout延迟2秒在DOM显示文本的问题求助

你直接操作原生DOM的方式不符合React的状态驱动渲染机制，React不会识别这种手动修改，所以DOM无法正常更新。正确的做法是用React的状态来管理文本内容，让React自动处理渲染更新。

正确实现代码 #

import { useState } from 'react';

function YourComponent() {
  // 定义状态管理要显示的文本
  const [displayText, setDisplayText] = useState('');

  const errorDisplay = () => {
    setTimeout(() => {
      // 更新状态，React会自动重新渲染DOM
      setDisplayText('please wait..');
    }, 2000);
  };

  // 可根据需求触发errorDisplay，比如组件挂载时：
  // useEffect(() => {
  //   errorDisplay();
  // }, []);

  return (
    <div>
      {/* 绑定状态到p标签 */}
      <p>{displayText}</p>
      {/* 示例：通过按钮点击触发 */}
      <button onClick={errorDisplay}>触发提示</button>
    </div>
  );
}

export default YourComponent;

关键说明 #

• 用useState声明状态变量displayText，React会追踪该变量的变化
• 调用setDisplayText更新状态时，React会自动重新渲染组件，同步更新<p>标签内容
• 避免直接操作DOM（如getElementById、innerHTML），这种方式会绕过React的渲染流程，引发不可预期的问题

内容的提问来源于stack exchange，提问作者Hamza Henni