对象在 Datatable 中作为 React 子错误无效答案

【问题标题】：Objects are not valid as a React child error in Datatable对象在 Datatable 中作为 React 子错误无效
【发布时间】：2020-01-03 21:08:50
【问题描述】：

好的，所以我在尝试从我的 web api 返回一些数据时收到此错误。我已经按照其他类似帖子的建议尝试了所有方法，但无法正常工作。任何帮助表示赞赏。

对象作为 React 子对象无效（发现：对象的键为 {addressType, address1, address2, city,county, postCode, country, id}）。如果您打算渲染一组子项，请改用数组。

数据...

"rows": [
        {
            "company": null,
            "controlPanel": null,
            "name": "Basement",
            "cloudAccessEnabled": true,
            "notes": "quad volcans quad quo si imaginator volcans brevens, nomen gravum Multum plorum brevens, in e quo quad",
            "addresses": [
                {
                    "addressType": "HeadOffice, Marketing",
                    "address1": "729 Rocky First Blvd.",
                    "address2": "APT 22",
                    "city": "Haverhill",
                    "county": "Dunbartonshire",
                    "postCode": "SL1 9GH",
                    "country": null,
                    "id": "62a494ee-37cf-3021-5a29-00b54adc9255"
                }
            ],
            "installers": null,
            "lastMaintenance": "2016-06-30T00:00:00",
            "nextMaintenance": "0001-01-01T00:00:00",
            "latestResult": "None Yet",
            "id": "c0d44330-8369-0e78-f45b-000142b59fa8"
        },

我如何尝试在数据表中显示... https://github.com/jbetancur/react-data-table-component

//this works
//cell: row => <div>{row.notes}</div>,

//doesnt work-Objects are not valid as a React child error
    cell: row => (
        <div>
          {row.addresses.map((addressType, id) => (
            <div key={id}>{addressType}</div>
          ))}
        </div>
      ),

【问题讨论】：

你在 map 函数中传递的 adressType 不是你认为你传递的，那个 adressType 实际上是你的 addresses[i] 迭代所以你应该做的是：<div key={adressType.id}>{adressType.adressType}</div>。将地图函数中的adressType 更改为更好的名称，例如address，然后执行address.id 和adress.adressType 并从地图函数中删除id。
或者你可以按照@JojoTutor 下面所说的进行解构。

标签： arrays reactjs object datatable

【解决方案1】：

应该是这样的：

cell: row => (
        <div>
          {row.addresses.map(({ addressType, id }) => (
            <div key={id}>{addressType}</div>
          ))}
        </div>
      ),

【讨论】：

感谢解决了 Objects are not valid as a React child 错误，但现在我得到 Uncaught TypeError: Cannot read property 'map' of null
这种情况可能某些“行”没有“地址”属性，试试这个：{row.addresses && row.addresses.map(({ addressType, id }) => (
{addressType}
))}
很高兴帮助...！