时间戳

首页 > 解决方案 > Uncaught Error: Objects are not valid as a React child ，如果你打算渲染一个子集合，请改用数组

javascript - Uncaught Error: Objects are not valid as a React child ，如果你打算渲染一个子集合，请改用数组

问题描述

我正在尝试使用 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

<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 中显示对象。请帮助。提前致谢。

标签： javascriptreactjsdatatableprimereact

解决方案

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

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

推荐阅读