Javascript 通过对象数组循环显示键值对

我正在学习react，在JSX中显示键值对时遇到了一个问题。下面显示了一组对象

常数段=[ { 标题颜色：1F1235， 文字颜色：1B1425， 按钮颜色：FF6E6C， 背景色：F4EFFC， 强调文字颜色：E2D9F1 }, { 标题颜色：1F1235， 文字颜色：1B1425， 按钮颜色：FF6E6C， 背景色：F4EFFC， 强调文字颜色：E2D9F1 } ]; 我试图在JSX中显示键值对。 我的循环方法

herosectcolors.mapcolor=>{ Object.keyscolor.forEachcolorItem=>{ console.logcolorItem，color[colorItem]； }; }; 在控制台中，键-值对如我所希望的那样显示。我想在JSX中显示键值对

{HeroSectionColor.mapcolor=>{ Object.keyscolor.forEachcolorItem=> {colorItem} {color[colorItem]} ; }} 上述代码不起作用，在浏览器中不呈现任何内容。感谢您的帮助。 请注意，对于任何格式错误，我们深表歉意。

请使用map而不是forEach。因为forEach不返回任何内容。 您还需要在外部映射方法中显式写入return。

使用map而不是forEach。因为forEach不返回任何内容。

---

您还需要在外部映射方法中显式写入return。

您需要返回该Object.keys调用。或者，正如你所做的，你可以这样做：

{HeroSectionColor.mapcolor=> Object.keyscolor.forEachcolorItem=> {colorItem} {color[colorItem]} ; }

---

注意从顶部映射中删除{}，您需要返回Object.keys调用。或者，正如你所做的，你可以这样做：

{HeroSectionColor.mapcolor=> Object.keyscolor.forEachcolorItem=> {colorItem} {color[colorItem]} ; } 请注意，从顶部映射中删除了{}，

将映射用于对象键迭代，而不是forEach。此外，还可以将Object.entries与数组分解一起使用，以便更轻松地访问属性：

{
  HeroSectionColors.map(color => {
    return Object.entries(color).map(([colorName, color]) => (
      <button className="button-hues">
        <span className="hues-display"></span>
        <div className="hues-info">
          <span className="section-color-name">{colorName}</span>
          <span className="color-hex">{color}</span>
        </div>
      </button>
    ));
  });
}

将贴图用于对象关键点迭代，而不是forEach。此外，还可以将Object.entries与数组分解一起使用，以便更轻松地访问属性：

{
  HeroSectionColors.map(color => {
    return Object.entries(color).map(([colorName, color]) => (
      <button className="button-hues">
        <span className="hues-display"></span>
        <div className="hues-info">
          <span className="section-color-name">{colorName}</span>
          <span className="color-hex">{color}</span>
        </div>
      </button>
    ));
  });
}

---

假设括号中的代码块出现在React组件的返回值中，则需要让代码块返回JSX，如果它是硬编码的，则会返回JSX。在这种情况下，forEach是错误的迭代器，因为它不返回映射值。使用map应足以：

{heroSection.map(colorObject => {
          const colorPairs = Object.entries(colorObject)
          return colorPairs.map(([key, value]) => {
            return (
              <button className="button-hues">
                <span className="hues-display"></span>
                <div className="hues-info">
                  <span className="section-color-name">{key}</span>
                  <span className="color-hex">{value}</span>
                </div>
              </button>
            );
          });
        })}

---

假设括号中的代码块出现在React组件的返回值中，则需要让代码块返回JSX，如果它是硬编码的，则会返回JSX。在这种情况下，forEach是错误的迭代器，因为它不返回映射值。使用map应足以：

{heroSection.map(colorObject => {
          const colorPairs = Object.entries(colorObject)
          return colorPairs.map(([key, value]) => {
            return (
              <button className="button-hues">
                <span className="hues-display"></span>
                <div className="hues-info">
                  <span className="section-color-name">{key}</span>
                  <span className="color-hex">{value}</span>
                </div>
              </button>
            );
          });
        })}

---

forEach用于副作用，不返回任何内容。改用Array.map。还可以查看Object.entries，它比Object.keys更适合这种情况。请发布解决方案，它无法工作。里面是一个有趣且绝对无效的markup.Array.forEach，用于产生副作用，并且不返回任何内容。改用Array.map。还可以查看Object.entries，它比Object.keys更适合这种情况。请发布解决方案，它无法工作。里面是一个有趣的、绝对无效的标记。我想我可能做错了什么。不适合我。我更新我的对象。你能看一下吗。谢谢。@AbeidAhmed检查这个沙箱：非常感谢，伙计！你的代码似乎没有错误，什么意思是出了问题？我想我可能做错了什么。不适合我。我更新我的对象。你能看一下吗。谢谢。@AbeidAhmed检查这个沙箱：非常感谢，伙计！你的代码似乎没有错误，什么是错误的？