Question

我已根据特定属性（在我的情况下为location.title）将对象分组在数组内。

let grouped = _.mapValues(
  _.groupBy(homes.items, "location.title"),
  x => x.map(y => _.omit(y, "location.title"))
);

输出结果为：

New York: (2) [{...}{...}]
Washington: (3)[{...}{...}{...}]

我的问题是我该如何映射此输出数组并在React应用程序中获取这样的输出。

纽约的房屋：纽约的家园来了

华盛顿的房屋：华盛顿的家园来了

Answer 1

您可以在grouped对象上使用Object.keys来获取所有键的数组，然后在该数组上使用map来分别呈现它们。

<div>
  {Object.keys(grouped).map(key => (
    <div key={key}>Homes in {key}: {grouped[key].join(', ')}</div>
  ))}
</div>

function App() {
  const grouped = {
    'New York': ['foo', 'bar'],
    Washington: ['foo', 'bar', 'baz']
  };

  return (
    <div>
      {Object.keys(grouped).map(key => (
        <div key={key}>Homes in {key}: {grouped[key].join(', ')}</div>
      ))}
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById("root"));

<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="root"></div>

在ReactJs中分组和显示值

1 个答案: