Reactjs 使用React在本地显示数组

我是ReactJs新手，想了解更多。到目前为止，我面临一个问题，我想通过使用lodash并将其显示到本地：3000。当我运行js文件时，它会给出一个错误

对象作为React子对象无效（找到：具有键的对象 {组}）。如果要渲染子对象集合，请使用 而不是数组

这是我的app.js文件：

import React, { Component } from 'react';
import Hotel from '../data/test.json';
import _ from 'lodash';
import './App.css';

const groups = _.groupBy(Hotel, 'roomTypeLabel');
console.log(groups);

class App extends Component {
  render() {
    return (
      {groups}
    );
  }
}

export default App;

---

首先，必须将

组

变量包装到父元素中。相邻元素必须用React包裹

return (
   <div>
      {groups}
   </div>
);

返回(
{组}
);

---

其次，groupBy返回一个对象。无法在React中显式渲染对象。您必须将其更改为数组。是否确实要使用

.groupBy

函数？

将此行添加到代码中：-

{groups}

以类似渲染的方式渲染

import React, { Component } from 'react';
import Hotel from '../data/test.json';
import _ from 'lodash';
import './App.css';

const groups = _.groupBy(Hotel, 'roomTypeLabel');
console.log(groups);

class App extends Component {
    render() {
       return (
          <div>
            {groups}
          </div>
       );
    }
}

export default App;

import React，{Component}来自'React'；
从“../data/test.json”导入酒店；
从“lodash”进口；
导入“/App.css”；
const groups=u.groupBy（酒店，“roomTypeLabel”）；
控制台日志（组）；
类应用程序扩展组件{
render（）{
返回(
{组}
);
}
}
导出默认应用程序；

因此，我的test.json文件有多个“roomTypeLabel”，我想将它们组合成一个。根据这些数据，我想显示不同的价格，例如：双人床房间：30美元，40美元，50美元。如果u.groupBy不起作用，我应该输入什么来显示？@JohnStefan我再也帮不了你了，因为我不知道你的数据是什么样子。在你的问题中提供它以供进一步分析。这就是我的test.json文件的样子。希望这有助于想象我正在努力实现的目标。