javascript - 我如何在 React 中循环遍历 JSON 对象

Question

我正在尝试从以下 JSON 对象 data.json:

中检索信息

{
  "status": "ok",
  "feed": {
    "title": "NOS Nieuws",
  },
  "items": [
    {
      "title": "Test Title",
      "description": "Test description",
      "enclosure": {
        "link": "https://examplelink.com/1008x567.jpg",
        "type": "image/jpeg"
      },
      "categories": []
    },
    {
      "title": "Test Title 2",
      "description": "Test 2",
      "enclosure": {
        "link":  "link": "https://examplelink.com/1008x567.jpg",
        "type": "image/jpeg"
      },
      "categories": []
    }
  ]
}

所以我想遍历这个 JSON 对象以显示所有可用项目及其相应的标题、描述和附件链接。

我知道我可以单独访问它们:

const items = data.items;
const title = items.title;
const url = items.enclosure.link;

通常我会做一个 for 循环并循环遍历 data.items[i]。但是，由于这是一个 react 和一个对象而不是一个数组，所以它的工作方式不同。

我当前的代码:

class Feed extends Component {
  render() {
    const items = data.items[0];
    const title = items.title;
    const url = items.enclosure.link;
    const description = items.description;
    const feed = [
      {
        url: url,
        title: title,
        description: description
      }
    ];

    return (
      <div className="feed">
        <h1>Newsfeed</h1>
        <div className="columns is-multiline">
          {feed.map(article => (
            <div className="column is-one-third">
              <NewsCard
                article={article}
                title={items.title}
                description={items.description}
              />
            </div>
          ))}
        </div>
      </div>
    );
  }
}

现在它只显示对象的第一个条目(因为它有 const items = data.items[0]) 我如何遍历 data.json 并在 NewsCard 组件中显示它的内容？我知道每个 child 都应该有一个独特的“关键” Prop ，但这就是我被困的地方。

Answer 1

I want to loop over this JSON object to display all the available items and its corresponding title, description and enclosure-link

然后而不是这样做:

const items = data.items[0];

试试这个:

const items = data.items;

然后，您可以使用 map 函数，如下所示:

items.map(item => (
  <div className="column is-one-third">
    <NewsCard
      article={item.enclosure.link}
      title={item.title}
      description={item.description}
    />
  </div>
));