使用setTimeout与useState时文本加图片出现[object Object]问题

问题原因 #

你直接把导入的图片对象{slackbot}和字符串拼接，JavaScript会将对象强制转换为字符串[object Object]，这就是页面显示异常的根源。在Vite、Create React App这类构建工具中，导入图片会返回一个包含图片路径信息的对象，而非纯字符串。

正确解决方案 #

方案1：分开控制显示状态（推荐）

通过一个布尔值state控制内容是否显示，渲染时直接用JSX组合图片和文本：

import slackbot from '../../public/images/slackbot.png'
import { useState, useEffect } from 'react'

const YourComponent = () => {
  const [showAutoMessage, setShowAutoMessage] = useState(false)

  useEffect(() => {
    const timeout = setTimeout(() => {
      setShowAutoMessage(true)
    }, 3000)
    // 组件卸载时清理定时器，避免内存泄漏
    return () => clearTimeout(timeout)
  }, [])

  return (
    <div>
      {showAutoMessage && (
        <div className="auto-message">
          <img src={slackbot} alt="Slackbot Icon" />
          <span>this will be the slackbot auto message</span>
        </div>
      )}
    </div>
  )
}

export default YourComponent

方案2：存储JSX元素（按需使用）

如果需要直接存储完整的内容结构，可以将JSX元素存入state（不推荐频繁使用，可能影响渲染性能）：

import slackbot from '../../public/images/slackbot.png'
import { useState, useEffect } from 'react'

const YourComponent = () => {
  const [autoMessage, setAutoMessage] = useState(null)

  useEffect(() => {
    const timeout = setTimeout(() => {
      setAutoMessage(
        <div className="auto-message">
          <img src={slackbot} alt="Slackbot Icon" />
          <span>this will be the slackbot auto message</span>
        </div>
      )
    }, 3000)
    return () => clearTimeout(timeout)
  }, [])

  return <div>{autoMessage}</div>
}

export default YourComponent

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