ReactJS中如何正确map遍历渲染对象内嵌数组属性

现有如下结构的集合对象：

{
    "id": 1,
    "collectionName": "dsa",
    "collectionItemsID": [
        "ad",
        "deneme1"
    ],
    "ownerOfCollection": "117961395738439786389",
    "createdAt": "2022-06-16T12:54:52.146Z",
    "updatedAt": "2022-06-16T12:54:52.146Z"
}

在ReactJS中直接通过{collection.collectionItemsID}渲染该数组字段时，数组元素会被直接拼接，输出无分隔的结果：addeneme1。
需求是不额外编写JavaScript字符串分割逻辑，实现数组元素的分隔独立渲染。之前尝试使用Object.keys方法实现未成功，需要找到正确通过map遍历collectionItemsID数组的渲染方案，参考的标准列表渲染写法如下：

{data.map((item, i) => (
  <tr key={i}>
    <td>
      <input
        id={item.user_id}
        type="checkbox"
        value={item.user_id}
        onChange={handleChange}
        checked={isChecked}
      />
    </td>
    <td>{item.user_id}</td>
    <td>{item.user_name}</td>
    <td className="isbanned">{item.isbanned}</td>
    <td>{item.registration_date}</td>
    <td>{item.last_login}</td>
  </tr>
))}

React直接渲染数组变量时，会默认调用数组的toString()方法做类型转换，将所有元素拼接为连续字符串输出，不会自动添加分隔符或用独立标签包裹元素。之前Object.keys方案无效，是因为该方法的作用是获取对象自身的可枚举键名数组，并非用来遍历目标数组的元素内容。

先判断集合数据是否加载完成，再直接调用collectionItemsID数组的map方法遍历，为每个元素返回独立的渲染节点即可，示例代码如下：

<div>
  {Object.keys(collection).length > 0 ? (
    <div>
      <h1>{collection.collectionName}</h1>
      <p>{collection.description}</p>
      {collection.collectionItemsID.map(function (itemID) {
        // 列表渲染需给根节点设置唯一key，若itemID全局唯一可直接作为key值，性能优于索引
        return <a key={itemID} href={`/${itemID}`}>{itemID}</a>
      })}
    </div>
  ) : (
    <p>Loading...</p>
  )}
</div>

补充：如果需要元素间展示分隔符，可在map返回的节点后按需添加逗号、空格，或给每个元素包裹块级标签实现自动换行。

内容的提问来源于stack exchange，提问作者Samet