javascript - 如何使用 lodash 对对象进行分组并映射到列表 -react

Question

我检查了其他答案，但无法找出我的问题。我尝试了很多事情，但在映射时以错误告终。这是我的主要数据列表示例。

conlocations = [{mruCode:"1700", division:"Agricultural",country:"USA",...},{mruCode:"1000",division:"Agricultural",country:"加拿大",...},{mruCode:"1500",division:"Industrial",country:"AUSTRALIA",...}]

现在我想根据 division:"Agricultural"country:{"USA","CANADA"} 的划分方式对国家/地区进行分组。然后我必须映射分组列表。怎么做？这可能是类似的问题，但无法得到结果。

到目前为止我已经尝试过，但在映射时出现错误。

组件代码

render(){
        const _labels = store.getLabels();
        const {conLocations} = this.props;
        const groups= _.groupBy(conLocations,'division');
        console.log(groups);
        return (
            <table>
                <tbody>
                    {this.props.groups.map(grp=>conLocations.filter(element=>grp.division.includes(element.division)).map((element,index)=>{
                        <tr key={index}>
                        <td>{_labels[element.division]}</td>
                        <td>{element.country}</td>
                        </tr>
                    }))}
                </tbody>
            </table>
        );
    }

在 UI 中，用户可以看到这样的 -> 农业 - 美国，加拿大

Answer 1

在lodash中 _.groupBy 实际上创建了一个对象，以分组参数为键，所以你必须把它当作一个对象来对待

const conLocations = [{
  mruCode: "1700",
  division: "Agricultural",
  country: "USA"
}, {
  mruCode: "1000",
  division: "Agricultural",
  country: "CANADA"
}, {
  mruCode: "1500",
  division: "Industrial",
  country: "AUSTRALIA"
}];

const groups = _.groupBy(conLocations, 'division');

Object.entries(groups).map(([key, value])=>{
  console.log("key:", key, "\nvalue:", value)
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.min.js"></script>