未捕获的错误：对象不是有效的React子对象，如果要渲染子对象的集合，请改用数组

问题描述

我正在尝试使用primereact显示嵌套的json对象。我能够显示简单明了的字段。但是当我得到一个嵌套的json时，我得到了异常，

Uncaught Error: Objects are not valid as a React child (found: object with keys {bdArmoredCourierId,armoredCourierName}). If you meant to render a collection of children,use an array instead.

让我发布我越来越喜欢的json对象

 "content":[
  {
     "storeId":1028490,"storeNumber":"0032965","name":"7-ELEVEN STORE","description":null,"type":"I","status":"A","address1":"7001 DALE BLVD","address2":null,"city":"DALE CITY","county":"PRINCE WILLIAM","state":"VA","country":"VA","postalCode":"22193","siteId":null,"sitePartyId":null,"partySiteId":null,"lePartyId":null,"cvid":null,"vru1":null,"vru2":null,"armoredCourierFlag":true,"depositoryAccount":{
        "bdDepositoryAccountId":1027474,"accountNumber":"00003750269169","bankInfo":{
           "bdBankInfoId":1027121,"bankRefCode":"110035","bankCode":"59","bankName":"BANK OF AMERICA N.T. AND S.A.","addressLine1":"TX1-492-10-01","addressLine2":null,"city":"DALLAS","state":"","zipCode":"75202-2911"
        },"transitRoutingNumber":111000012,"accountType":"SP","accountDescription":"MD RENT ACCT","accountOpenedOn":"1993-09-27","accountClosedOn":null,"prenoteFlag":"N","prenoteDate":null,"wireRoutingNumber":null,"comments":null
     },"armoredCourier":{
        "bdArmoredCourierId":3,"armoredCourierName":"Loomis"
     },"courierBranch":{
        "bdCourierBranchId":34,"courierBranchName":" Ontario - B0304"
     },"courierBranchAddress":{
        "bdCourierBranchAddrId":1028489,"address1":"add2","address2":"add2","city":"asd","state":"dasd","postalCode":"dq","courierBranchId":null,"createdBy":null,"lastModifiedBy":null,"createdOn":"2020-08-19T12:38:23.33286Z","lastModifiedOn":null
     },"cashVault":{
        "bdCashVaultId":59,"cashVault":"Austin"
     },"cashVaultAddress":null
  },{

我正在使用如下所示的数据表

<DataTable
       value={storeDepositoryList}
       style={{ width: "auto" }}
       emptyMessage="No Records Found">

      <Column field="storeNumber" header="Store Number" sortable={true} />
      <Column field="bankName" header="Bank Name" sortable={true} />
      <Column field="postalCode" header="Store Zip Code" sortable={true} />
      <Column field="armoredCourier" header="Armored Courier" sortable={true} />
      <Column field="courierBranch" header="Courier Bank" sortable={true} /> 
      <Column field="cashVault" header="Cash Vault" sortable={true} /> 
      
       </DataTable>

我可以显示商店编号和邮政编码。但是当涉及到bankName，armoredCourier，courierBranch，cashVault时，我遇到了提到的异常。 我不知道如何在DataTable中显示对象。请提前提供帮助。

解决方法

这可能是因为您渲染的多个子级没有共享节点。尝试将Column包装在React片段中：

<DataTable
       value={storeDepositoryList}
       style={{ width: "auto" }}
       emptyMessage="No Records Found">
  <>
    <Column />
    <Column />
    <Column />
  </>
</DataTable>