Question

我是ReactJ的新手，并且想了解更多有关它的信息。到目前为止，我面临一个问题，我想使用lodash将其分组并显示在local：3000中。当我运行js文件时，它会显示一条错误消息

对象作为React子对象无效（找到：带有键的对象 {groups}）。如果您打算渲染儿童集合，请使用而不是数组。

这是我的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;

Answer 1

将此行添加到您的代码中：-<div>{groups}</div>呈现方式

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;

Answer 2

首先，您必须将groups变量包装到父元素中。相邻元素必须包装在React中。

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

其次-_.groupBy返回一个对象。您不能在React中显式渲染对象。您必须将其更改为数组。您确定要使用_.groupBy函数吗？

使用React在本地显示数组

2 个答案: