Question

我想让以下代码遍历我创建的对象。

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 -`,
  },

如您所见，我只希望代码遍历第一个对象（重做和第 k 个）。知道如何做到这一点吗？

感谢任何帮助。

Answer 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];

如何遍历对象，做出反应

1 个答案: