React JS Material UI DataGrid：如何在多个 table 之间加入数据？

Question

我有一个带有 React 和 Material UI 的数据网格。所有数据均来自tableA，结构如下：

{Name: foo, Surname: Fry, Job Position: 3}

然后有一个tableB里面包含了各个作品的对应关系eg:

{id: 3, Job: "comic"}
{id: 4, Job: "actor"}
etc...

如何在网格中显示“comic”而不是示例中的“3”？一千个感谢

Answer 1

您可以使用 map() 函数处理您的数据。如果您的原始数据位于名为 people 的数组中：

const people = [
  {name: "Alice", surname: "Alman", job:3}, 
  {name: "Bob", surname: "Briscoe", job:3}, 
  {name: "Carol", surname: "Conway", job:1}, 
  {name: "Dan", surname: "Dunne", job:2}, 
]

你还有第二个table可用

const jobs = [
  {id: 1, job:"Programmer"}, 
  {id: 2, job:"Actor"}, 
  {id: 3, job:"Comic"}, 
  {id: 4, job:"Manager"}, 
]

然后在将数据传递到网格之前，您可以执行以下映射以将职位添加到每条记录：

const data = people.map(person => {
  const job = jobs.find(job => job.id == person.job);
  return {...person, title: job.job}
});

最终得到这些值：

[{ "name": "爱丽丝", “姓氏”：“阿尔曼”， “工作”：3， “标题”：“漫画” }, { "name": "鲍勃", “姓氏”：“布里斯科”， “工作”：3， “标题”：“漫画” }, { “名字”：“卡罗尔”， “姓氏”：“康威”， “工作”：1， "title": "程序员" }, { "name": "丹", “姓氏”：“邓恩”， “工作”：2， "title": "演员" }]

React JS Material UI DataGrid：如何在多个 table 之间加入数据？

React JS Material UI DataGrid: how to join data between multiple table?

reactjs

material-ui

datagrid