如何遍历对象，做出反应答案

【问题标题】：how to iterate through objects, react如何遍历对象，做出反应
【发布时间】：2021-03-27 21:18:02
【问题描述】：

我想让下面的代码遍历我创建的一个对象。

function itemContent(number) {
  return (
    <div >
      <div className="item">
          <div className="itemPic">
            <img src={work.worked[i].picture} alt={work.worked[i].alt} />
          </div>
          <div className="itemInfo">
            <div className="itemInfoLeft">
              <p>{work.worked[i].title}</p>
              <p>{work.worked[i].intro}</p>
            </div>
            <div className="itemInfoRight">
              <p>{work.worked[i].source}</p>
              <p>{work.worked[i].date}</p>
            </div>
          </div>
        </div>
      </div>
  )
}

以下是我的对象：

const worked = {
  redo: {
    picture: `../../images/redo_logo.jpg`,
    alt: `----`,
    title: `/////`,
    source: `RE-DO consulting`,
    intro: `lorem`,
    date: `Aug 2020 -`,
  },
  kth: {
    picture: `../../images/kth_Building.jpg`,
    alt: `-------`,
    title: `hmm`,
    source: `bleh`,
    intro: `lorem.`,
    date: `Aug 2020 -`,
  },

如您所见，我只希望代码遍历第一个对象（redo 和 kth）。知道怎么做吗？

感谢任何帮助。

【问题讨论】：

正如我所见，数据是对象的对象。如果是 url，你可以通过写 src={worked.redo.picture} 来访问图片数据。如果本地存储图片，需要先导入图片，赋值为变量，然后使用

标签： javascript reactjs object iteration

【解决方案1】：

你的意思是这样的吗？

function itemContent(number) {
  const workedItems = Object.values(work.worked);
  return (
    <div>
    {workedItems.map(item =>
      <div className="item">
          <div className="itemPic">
            <img src={item.picture} alt={item.alt} />
          </div>
          <div className="itemInfo">
            <div className="itemInfoLeft">
              <p>{item.title}</p>
              <p>{item.intro}</p>
            </div>
            <div className="itemInfoRight">
              <p>{item.source}</p>
              <p>{item.date}</p>
            </div>
          </div>
        </div>
      }
      </div>
  )
}

Object.values(work.worked) 返回以下数组：

[
  {
    "picture": "../../images/redo_logo.jpg",
    "alt": "----",
    "title": "/////",
    "source": "RE-DO consulting",
    "intro": "lorem",
    "date": "Aug 2020 -"
  },
  {
    "picture": "../../images/kth_Building.jpg",
    "alt": "-------",
    "title": "hmm",
    "source": "bleh",
    "intro": "lorem.",
    "date": "Aug 2020 -"
  }
]

如果您只想遍历redo 和kth 而忽略work.worked 的其他键，您可以使用这个：

const workedItems = [work.worked.redo, work.worked.kth];

【讨论】：