如何在React中循环JSON对象

Question

我试图从以下JSON对象数据中检索信息。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循环和循环。项目[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项目=data.items[0]）我如何循环data.json并在NewsCard组件中显示其内容？我知道每个孩子都应该有一个独特的“钥匙”道具，但这就是我卡住的地方。

Answer 1

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

试试这条路

Answer 2

你可以这样做。

    class Feed extends Component {
      render() {        
        let newsCards = data.items.map(item => {
            <div className="column is-one-third">
                  <NewsCard
                    article={item}
                    title={item.title}
                    description={item.description}
                  />
                </div>
        });

        return (
          <div className="feed">
            <h1>Newsfeed</h1>
            <div className="columns is-multiline">
              {newsCards}
            </div>
          </div>
        );
      }
    }

Answer 3

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

然后，不要这样做：

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>
));