Question

我正在像这样从对象的“动物”数组映射数据：

renderAnimals() {
        return Object.entries(this.state.animals).map(([key, value], i) => {
            return (
                <div key={key}>
                    <b>{this.state.animals[key].group}</b>
                    <p>{this.state.animals[key].name}</p>
                </div>
            )
        })
    }

此动物对象当前分为两组，数据呈现为：

海洋动物 鲨鱼

海洋动物 鱼

海洋动物 章鱼

家畜猪

家畜牛

家畜鸡

我的问题是：我该如何映射它，以便所有动物组自动位于一个div中，并且组名不会重复出现，所以看起来像这样？

海洋动物 鲨鱼，鱼，章鱼

家畜猪，牛，鸡

“动物”对象看起来像这样：

    animals:
     [0: {group: "Sea Animals", name: "Shark"},
      1: {group: "Sea Animals", name: "Fish"}]

感谢您的投入，谢谢！

Answer 1

您使用Object.entries，但是animals是对象数组，而不是对象。

与object.values一起使用reduce可以将您的对象分为另一个对象数组，但是您将只有2个对象（因为按“动物组”对它们进行了分组）。对象看起来像{ animalGroup : string, names: array[] }，然后在render函数中，再次使用对象值来渲染所需的内容。

见下文

const animals = [{
    group: "Sea Animals",
    name: "Shark"
  },
  {
    group: "Sea Animals",
    name: "Fish"
  },
  {
    group: "Sea Animals",
    name: "Kraken"
  },
  {
    group: "Farm Animals",
    name: "Pig"
  },
  {
    group: "Farm Animals",
    name: "Cow"
  },
  {
    group: "Farm Animals",
    name: "Tazmanian Devil"
  },
]



const animalsArr = Object.values(animals.reduce((result, {group,name}) => {
    if (!result[group]) {
   	 	result[group] = { group, name : []} 
    }
    result[group].name.push(name);
    return result;
}, {}));

function Animals() {
  return (
    <div className="Animals">
      {Object.values(animalsArr).map((value,index) => {
        return (
          <div key={index}>
            <p>{value.group} : {value.name + ''}</p>
          </div>
        );
      })}
    </div>
  );
}

const animalsContainer = document.getElementById("animals");
ReactDOM.render(<Animals />, animalsContainer);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="animals" />

Javascript-将映射数据分组

1 个答案: