导入Alerts组件到App.js时报Objects are not valid as a React child错误

你遇到的报错核心是**react-alert 版本不兼容导致的非法组件渲染**：

• 当前主流的 react-alert@7.x 及以上版本已经完全移除了 withAlert 高阶组件（HOC）API，仅支持 useAlert Hook 写法
• 你用旧语法调用 withAlert(Alerts) 时，返回的不是合法的React组件，而是不符合渲染规范的对象，因此触发「Objects are not valid as a React child」错误
• 次要排查点：若你使用的是旧版本react-alert，需要确认和react-alert-template-basic的版本匹配，同时没有错误导入命名导出的Alerts组件

提供两种可选修复方案，按需选择即可： #

方案1：适配新版本（推荐） #

直接改写Alerts.js为Hook写法，无需降级依赖，适配最新的react-alert版本：

// Alerts.js 完整修改后代码
import React, { useEffect, Fragment } from 'react'
import { useAlert } from 'react-alert'

const Alerts = () => {
  const alert = useAlert()
  useEffect(() => {
    alert.show('It Worked')
  }, [alert])
  return <Fragment />
}

export default Alerts

App.js代码不需要做任何修改，直接运行即可正常弹出提示。 #

方案2：保留类组件写法，降级依赖到兼容版本 #

如果你一定要保留现有的类组件+withAlert写法，可执行以下命令降级依赖到支持HOC的版本：

1. 先卸载当前不兼容的版本：

npm uninstall react-alert react-alert-template-basic

2. 安装兼容旧版本：

npm install react-alert@6.0.0 react-alert-template-basic@1.0.0

安装完成后原有代码无需修改即可正常运行。

额外验证点：请确认你App.js中导入Alerts的写法是默认导入import Alerts from "./Alerts"，不要写成命名导入import { Alerts } from "./Alerts"，你的现有导入写法是正确的，无需调整。

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