Javascript 如何在React中循环JSON对象

我正在尝试从以下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>
    );
  }
}

类提要扩展组件{
render（）{
常量项=数据项[0]；
const title=items.title；
const url=items.enclosure.link；
const description=items.description；
常数馈送=[
{
url:url，
标题:标题,，
描述：描述
}
];
返回(
新鲜事
{feed.map（article=>(
))}
);
}
}

现在它只显示对象的第一个条目（因为它有const items=data.items[0]），如何循环data.json并在新闻卡组件中显示其内容？我知道每个孩子都应该有一个唯一的“钥匙”道具，但这正是我被卡住的地方。

const feed=data.items
 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>
      ))}

{feed.map（项=>(
))}

这样试试

我想循环这个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>
));

items.map（item=>(
));

您可以这样做

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

类提要扩展了组件{
render（）{
让新闻卡=data.items.map（item=>{
});
返回(
新鲜事
{新闻卡}
);
}
}

您需要为所有对象保持相同的url？您有一个Javascript对象。这个问题与JSON无关，JSON是一种将数据序列化为字符串的方法。无论如何，当前您的变量

feed

是一个对象列表，您非常清楚如何循环（使用

feed.map

）。您应该简单地做同样的事情，但是使用

数据.items

而不是

提要

。您可以使用循环在对象上循环。