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

【问题标题】：Objects are not valid as a React child If you meant to render a collection of children, use an array instead对象作为 React 子级无效如果您要渲染子级集合，请改用数组
【发布时间】：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 找出对象是什么吗？

标签： javascript reactjs

【解决方案1】：

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

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

它可以很容易地复制。

<Component>{data}</Component>

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

【讨论】：