Reactjs React测试库：对象作为React子对象无效

我试图使用jest编写测试，我遇到了这个错误

Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead.
        in td (created by TableCell)
        in TableCell (created by DataTable)
        in tr (created by TableExpandRow)
        in TableExpandRow (created by DataTable)
        in tbody (created by TableBody)
        in TableBody (created by DataTable)
        in table (created by Table)
        in Table (created by DataTable)
        in div (created by DataTable)
        in div (created by TableContainer)
        in TableContainer (created by DataTable)
        in div (created by DataTable)
        in DataTable
        in Unknown
        in Unknown (created by EnhancedDataTable)
        in EnhancedDataTable (created by MyPage)
        in div (created by MyPage)
        in MyPage


  27 | 
  28 |     it('renders', () => {
> 29 |         const { container } = render(<MyPage />);

对象作为React子对象无效（找到：[object Promise]）。如果要呈现子对象集合，请改用数组。
在td中（由TableCell创建）
在TableCell中（由DataTable创建）
在tr中（由TableExpandRow创建）
在TableExpandRow中（由DataTable创建）
在tbody中（由TableBody创建）
在TableBody中（由DataTable创建）
在表中（由表创建）
在表中（由DataTable创建）
在div中（由DataTable创建）
在div中（由TableContainer创建）
在TableContainer中（由DataTable创建）
在div中（由DataTable创建）
在数据表中
不为人知
未知（由EnhancedDataable创建）
在EnhancedDataable中（由MyPage创建）
在div中（由MyPage创建）
在MyPage中
27 | 
28 |它（'呈现'，（）=>{
>29 | const{container}=render（）；

MyPage是一个返回

<React.Fragment>
    <MyHeader title={'Page Header'} />
    <div className="page-content">
        <EnhancedDataTable
            actions={actions}
            rowActions={rowActions}
            headers={rowHeaders}
            rowDetail={rowDetail}
            rows={rowsData}
            className='my-table'
        />
    </div>
</React.Fragment>

---

我在这里遗漏了什么？

您正在尝试将一个对象（promise）作为一个孩子呈现。从您的代码很难知道在哪里，但是，假设您的表与rc components表类似，它可能是这样的：

假设我有一个数组，并希望将其呈现到一个表中

const arr=[
{
公司：“XYZ”，
所有者：{
姓名：“朱利叶斯”
}
}
]

现在，我想在一个包含列的表中呈现它：| company | owner |，因此我创建了一个headers数组：

const arr=[
{
数据索引：“公司”
},
{
数据索引：“所有者”
}
]

现在，这不起作用，因为我的表将尝试呈现对象

{name:'Julius'}

，而对象作为子对象无效

修复方法是将我的标题更改为以下内容：

const arr=[
{
数据索引：“公司”
},
{
数据索引：['owner'，'name']
}
]

现在它应该可以工作了，因为列将是

行['owner']['name']

，一个字符串

---

如果没有更多的代码，就很难准确地说出问题出在哪里，但希望这个示例能让您了解对该错误的反应意味着什么。我所知道的是错误在表的单元格中的某个位置，因为堆栈在未知（由EnhancedDataable创建）中显示

，

和最后一个（我猜是第一个）项是一个

td

，是表数据的常用元素。

您应该检查

rowsData

，因为它很可能是表中唯一直接呈现某些内容并应呈现为td的元素。傻我，您是对的！我使用的是

const[rowsData，setRowsData]=useState（null）；

而不是

const[rowsData，setRowsData]=useState（[]）；

。更改null==>[]，测试通过了。对不起，我没有意识到我已经对测试代码进行了注释，从而通过了测试。但问题仍然存在。这应该仍然是数据的问题，我猜您是从某种外部api加载的，但没有等待返回，类似于：

setRowsData（api.get（'/data'））

当它应该是

setRowsData（wait api.get（'/data'））

时。要么是它，要么是行中的一个对象，里面有一个承诺。通过将

rows={rowsData}

更改为

rows={[]}

并放置

console.log（rowsData），这两者都应该很容易被发现

就在

MyPage

的返回语句之前，您还可以发布

MyPage

中的更多代码，如果它是我的话，

标题

以及与行数据相关的任何内容都会有所帮助。此外，您希望接收行内数据的类型也会有所帮助。