时间戳

首页 > 解决方案 > 从 ReactJS 中的对象列表渲染 JSON 子列表

javascript - 从 ReactJS 中的对象列表渲染 JSON 子列表

问题描述

我有这样的 JSON 数据。我想渲染子对象标题。但它说“index.js:1 警告：列表中的每个孩子都应该有一个唯一的“关键”道具。”

[
  {
    "title": "Components",
    "children": [
      {
        "title": "Buttons",
        "url": "url"
      }
    ]
  },
  {
    "title": "Components",
    "children": [
      {
        "title": "Buttons",
        "url": "url"
      }
    ]
  }
]

如何获得儿童头衔？{data.children.title} 不起作用。

const items = data.map(data => {
        return(
            <div>
                <ul>
                    <li>
                        <span>{data.title}</span>
                        <span>{data.children.title}</span>
                    </li>
                </ul>
            </div>
        )
    });

    return items;

标签： javascriptjsonreactjsdictionaryjsx

解决方案

假设您的children子数组始终至少有一个项目，那么您可以通过以下方式呈现title当前data对象的第一个子项目：

data.children[0].title

在您的渲染代码中，它看起来像这样：

const items = data.map((data, idx) => (
    <div key={idx}>
        <ul>
            <li>
                <span>{data.title}</span>
                <span>{data.children[0].title}</span>
            </li>
        </ul>
    </div>));

return items;

对于更强大的替代方案，您可以在渲染之前通过在渲染逻辑children中添加链接调用来检查子数组中是否存在项目：filter()

const items = data
/* If children sub-array is non-empty, then it is included
for rendering */
.filter(data => data.children.length > 0)
/* Map any data items that pass filtering */
.map((data, idx) => (
    <div key={idx}>
        <ul>
            <li>
                <span>{data.title}</span>
                <span>{data.children[0].title}</span>
            </li>
        </ul>
    </div>));

return items;

另请注意，我已经在渲染列表时根据需要在每个映射的每个映射上包含了key道具，这应该可以解决您在控制台中看到的警告。希望有帮助！div

更新

要将每个data对象的所有子对象呈现为内部的子列表，ul您可以通过以下元素的内部映射data.children来实现：<li>

const items = data
.filter(data => data.children.length > 0)
.map((data, idx) => (
    <div key={idx}>
        {/* 
        I'm assuming data.title should exist outside of 
        children list 
        */}
        <span>{data.title}</span>
        <ul> 
        {   data
            .children
            .map((child, jdx) => (
            <li key={jdx}>
                <span>{child.title}</span>
            </li>))
        }
        </ul>
    </div>));

推荐阅读