Question

我正在学习反应，但在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>
 ));
})}

上面的代码不起作用，在浏览器中不显示任何内容。任何帮助表示赞赏。附言抱歉，出现任何格式错误。

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

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

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

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

Answer 4

使用let bases = [{ children: [{ name: "abc", detail: "123" }, { name: "def", detail: "456" } ] }, { children: [{ name: "abc" , detail: "123" }, { name: "xyz" , detail: "456" } ] }, {} ]; let output = []; let seenNames = {}; for (base of bases) { if (!base.children) continue; for (child of base.children) { let name = child.name; if (seenNames[name]) continue; seenNames[name] = true; output.push({ value: name, label: name, }); } } console.log(output);代替map。由于forEach不返回任何内容。另外，您还需要在外部map方法中显式编写forEach。

显示遍历对象数组的键值对

4 个答案: