显示循环遍历对象数组的键值对答案

【问题标题】：Display key value pairs from looping through an array of objects显示循环遍历对象数组的键值对
【发布时间】：2020-01-22 19:25:31
【问题描述】：

我正在学习 react，但在 JSX 中显示键值对时遇到问题。对象数组如下所示。

const heroSection = [
  {
    "Heading color": "#1F1235",
    "Text color": "#1B1425",
    "Button color": "#FF6E6C",
    "Background color": "#F4EFFC",
    "Accent text color": "#E2D9F1"
  },
  {
    "Heading color": "#1F1235",
    "Text color": "#1B1425",
    "Button color": "#FF6E6C",
    "Background color": "#F4EFFC",
    "Accent text color": "#E2D9F1"
  }
];

我正在尝试在 JSX 中显示键值对。我的循环方法。

HeroSectionColors.map(color => {
  Object.keys(color).forEach(colorItem => {
    console.log(colorItem, color[colorItem]);
  });
});

在控制台中，键值对显示为我想要的。我想在 JSX 中显示键值对。

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

上面的代码不起作用并且在浏览器中没有呈现任何内容。任何帮助表示赞赏。附言对于任何格式错误，我们深表歉意。

【问题讨论】：

Array.forEach() 用于副作用，不返回任何内容。请改用Array.map()。另请查看Object.entries()，它比Object.keys() 更适合这种情况。
请您发布解决方案，无法使其正常工作。
<div> inside <button> 是一个有趣且绝对无效的标记。

标签： javascript reactjs

【解决方案1】：

使用map 代替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>
    ));
  });
}

【讨论】：

我想我可能做错了什么。没有为我工作。我更新我的对象。你能看看吗。谢谢。
@AbeidAhmed 检查此沙箱：codesandbox.io/s/react-example-bpiss
非常感谢朋友！
您的代码似乎没有错误，您的意思是有什么问题？

【解决方案2】：

您需要返回该 Object.keys() 调用。或者，这就是你所做的一切，你可以这样做：

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

注意从顶部地图中删除了{}

【讨论】：

【解决方案3】：

假设括号中的代码块出现在 React 组件的返回值中，您需要让代码块返回 <button> 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>
            );
          });
        })}

【讨论】：

【解决方案4】：

使用map 代替forEach。因为forEach 没有返回任何东西。您还需要在外部映射方法中显式编写return。

【讨论】：