Reactjs 按数据字段分组

我有一个列表组件包含主题、否、描述字段。例如：ACC 121，描述..，ACC 121描述..，ACC 122描述。。。附件211说明。。。。如何按同一主题分组，子组件中没有标签和描述

Courses=[{id:1, SUBJECT: ACC, NO:121,DESCR: 'class description1'}, 
         {id:2, SUBJECT:ACC, NO:121, DESCR:'class description2'},
          ...]  

const CourseList=({Courses, onCourseSelect})=>{

const renderedList= Courses.map(course=>{
    return (
    //add <h2>{course.SUBJECT} {course.NO} ???
    <CourseItem key={course.ID} descr={course.DESCR} onCourseSelect={onCourseSelect}  ></CourseItem>
    );
})
return <div className="List ui relaxed divided list">

{renderedList}</div>

对象列表如下：

ACC: (26) […]
0: Object { ID: 1079, DESCR: "class description1", … }
1: Object { ID: 1080, DESCR: "class description2",  … }
2: Object { ID: 1081, DESCR: "class description3",...}

​​
如何渲染每个对象？我试过：

return <div>
 {Object.keys(renderedList).map(key => (
{renderedList["SUBJECT"]}
 </div>

返回
{Object.keys（renderedList.map）（key=>(
{renderList[“SUBJECT”]}

---

但是它不起作用。谢谢。

我们的想法是这样做。创建一个helper函数，通过分组将数据重新构造为多维数组，以便多维数组中的每个数组都保存关于具有相同id的课程的记录。然后在多维数组中循环并执行所需的任何逻辑t to

let courses=[{id:1, SUBJECT: "ACC", NO:121,DESCR: 'class description1'}, 
         {id:2, SUBJECT:"ACC", NO:121, DESCR:'class description2'},
        ...]  


//Where ever we want to print the first group we just need to call the CourseList with a single input from the multidimentional structured array asonst 

CourseList=(courses, onCourseSelect)=>{
//create another variable to hold the structured data
//this ensures that each key in the array is it self another array holding all the courses with that same id.
let structuredData = new Array();
 courses.map(course =>  structuredData[course.id] = (courses.filter(co =>(co.id == course.id ))))
  <div className="List ui relaxed divided list">
    structuredData.map((data, k) => {
      //each iteration over data is printing for a single group
      console.log("Group", k)
      data.map(course=>
        <CourseItem key={course.id} descr={course.DESCR} onCourseSelect={onCourseSelect}  />
      )
    })
 </div>
}

let courses=[{id:1，主题：“ACC”，编号：121，描述：“类描述1'}，
{id:2，主题：“ACC”，编号：121，描述：'class description2'}，
...]  
//无论何时我们想要打印第一组，我们只需要使用多维结构化数组asonst的单个输入调用CourseList
课程列表=（课程，onCourseSelect）=>{
//创建另一个变量来保存结构化数据
//这确保数组中的每个键都是另一个数组，该数组包含具有相同id的所有课程。
设structuredData=newarray（）；
courses.map（course=>structuredData[course.id]=（courses.filter（co=>（co.id==course.id）））
structuredData.map（（数据，k）=>{
//对数据的每次迭代都针对单个组进行打印
console.log（“组”，k）
data.map（课程=>
)
})
}

如果列表不是由对象组成的，那么按您的方式访问它将不起作用。您能给出一个列表的表示形式，其中包含您所引用的字段吗？课程是一个JSON对象数组，具有类似[{id:1，SUBJECT:ACC，NO:121，DESCR:'class description1'}，{id:2，SUBJECT:ACC，NO:121，DESCR:'class description2'}的字段,...]谢谢。在这种情况下，你做的是正确的，当你运行上面的代码时，你得到什么错误？它现在不分组。我想要显示像组1 -项目1 -项目2组2 -项目1 -项目2:你应该考虑写一个帮助函数来消毒并将课程数组构造成一个准备好的表格。我不擅长ES6。我需要时间来消化这行代码courses.map（course=>structuredata[course.id]=（courses.filter（co=>（co.id==course.id）））我使用lodash对主题进行分组，没有两个字段。我的console.log显示了分组的对象数组，但我不知道如何在react.ACC:[…] ​​ 0:对象{ID:1079，DESCR:“类描述1”，…}​​ 1:对象{ID:1080，DESCR:“类描述2”，…}​​ 2:对象{ID:1081，DESCR:“类描述3”，…}​​ 3:对象{…}假设分组正确，只剩下映射到分组的项并显示。因此，从上面的日志中，您可以不执行

而返回{Object.keys（renderedList）.map（key=>（{renderedList[“SUBJECT”]}）

只需执行

renderedList.map（item=>{console.log（item.SUBJECT）}）

在我有console.log的地方，您可以直接访问项目上的任何属性以及您想要的逻辑。行

courses.map（course=>structuredData[course.id]=（courses.filter（co=>（co.id==course.id）））

简单地说，就是在一个数组中获取所有具有相同id的项（过滤器就是这样做的），然后将其设置为由元素id标识的结构数据数组，例如结构数据数组将在最后看起来像

[数组（1），数组（3），数组（3），数组（3）]

其中数组（1）保存与1 etcThanks具有相同id的所有项目！lodash groupby更易于理解和使用。我使用了您的代码{Object.keys（renderedList）.map（key=>（{renderedList[“SUBJECT”]}），它现在可以工作了。

let courses=[{id:1, SUBJECT: "ACC", NO:121,DESCR: 'class description1'}, 
         {id:2, SUBJECT:"ACC", NO:121, DESCR:'class description2'},
        ...]  


//Where ever we want to print the first group we just need to call the CourseList with a single input from the multidimentional structured array asonst 

CourseList=(courses, onCourseSelect)=>{
//create another variable to hold the structured data
//this ensures that each key in the array is it self another array holding all the courses with that same id.
let structuredData = new Array();
 courses.map(course =>  structuredData[course.id] = (courses.filter(co =>(co.id == course.id ))))
  <div className="List ui relaxed divided list">
    structuredData.map((data, k) => {
      //each iteration over data is printing for a single group
      console.log("Group", k)
      data.map(course=>
        <CourseItem key={course.id} descr={course.DESCR} onCourseSelect={onCourseSelect}  />
      )
    })
 </div>
}