React-Redux组件导入渲染报错：Objects are not valid as a React child 求助

哥们，你遇到的问题核心很明确：你导出的不是React组件本身，而是一个包含组件和loadData方法的普通对象，直接把这个对象当组件渲染肯定会报错。

问题拆解 #

你当前的导出代码是：

export default { component: connect(mapStateToProps)(Sites), loadData }

这意味着当你用import Sites from '../views/site/sitesView'时，Sites指向的是这个{ component, loadData }对象，而不是React组件。React没法把普通对象当作子元素渲染，所以才会抛出Objects are not valid as a React child的错误。

两种解决办法 #

办法一：保持现有导出结构，调整导入方式

如果你不想改导出代码，可以在导入时明确获取对象里的component属性：

• 方式1：直接取属性

import SitesWrapper from '../views/site/sitesView';

// 渲染时用对象里的component
<SitesWrapper.component />

• 方式2：解构导入并重命名

import { component as Sites } from '../views/site/sitesView';

// 现在可以直接渲染<Sites/>了
<Sites />

办法二：调整导出方式（更推荐）

这种方式更符合React组件的常规导出习惯，把组件和工具方法分开导出：

// 先默认导出连接Redux后的组件
export default connect(mapStateToProps)(Sites);
// 再单独命名导出loadData
export { loadData };

然后导入的时候就可以正常用了：

// 导入组件
import Sites from '../views/site/sitesView';
// 如果需要用到loadData，单独导入
import { loadData } from '../views/site/sitesView';

// 直接渲染<Sites/>即可
<Sites />

为什么之前的import { Sites }没用？ #

因为你没有命名导出Sites这个变量，默认导出的是那个对象，所以解构{ Sites }根本找不到对应的属性，自然没用啦。

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