对象作为 React 子级无效如果您要渲染子级集合，请改用数组

Posted 2023-02-22

【中文标题】对象作为 React 子级无效如果您要渲染子级集合，请改用数组

【英文标题】：Objects are not valid as a React child If you meant to render a collection of children, use an array instead

【发布时间】：2020-08-12 01:17:22

【问题描述】：

当我将详细数据传递给 modal 以显示时，我收到此错误。实际上，该功能是当用户单击帖子时，会出现一个模态以显示显示详细信息的模态。我正在使用 react with redux 进行状态管理。这是我的代码

错误对象作为 React 子对象无效（找到：带有键 nid、title、content、noticeType、creationDate、updatedDate 的对象）。如果您打算渲染一组子项，请改用数组。

noticeModal.jsx

const ModalDialog  = (open ,onClose, data) => 

        return (
            <Dialog style=width: '100%' maxWidth="sm" onClose=() => onClose() aria-labelledby="customized-dialog-title" open=open>
                <DialogContent dividers>
                            <table style=width: '100%'>
                                <tr>
                                    <TableRow title>No</TableRow>
                                    <TableRow
                                    >
                                        data.nid</TableRow>
                                </tr>
                                <tr>
                                    <TableRow title>Type</TableRow>
                                    <TableRow>data.noticeType</TableRow>
                                </tr>
                                <tr>
                                    <TableRow title>Title</TableRow>
                                    <TableRow>data.title</TableRow>
                                </tr>
                            </table>
                    <br/>

通知.jsx

<ModalDialog
              open=this.state.openDetailModal
              onClose=this.closeDetailModal
              data = this.props.noticeDetail
          />

【问题讨论】：

你能用console.log(data) in ModalDialog 找出对象是什么吗？

【参考方案1】：

错误对象作为 React 子对象无效（找到：带键的对象 nid、标题、内容、noticeType、creationDate、updatedDate）。如果你 打算渲染一组子元素，请改用数组。

这通常是由渲染对象或数组引起的。

它可以很容易地复制。

<Component>data</Component>

但是，我在您的组件中没有看到任何此类事件。您确定您检查的是正确的组件吗？