javascript - REACT.JS 填充自定义表头和表体

Question

我正在尝试用对象数组填充表头和表体。我觉得这样真的很低效。有更好的方法吗？

clients:
            [
                {
                    Id: 0,
                    Name: "Camren Moore",
                    Country: "Wierdo Land",
                    City: "Oud-Turnhout",
                    Salary: "$36,738",
                    Actions: null,
                },
                {
                    Id: 1,
                    Name: "Adison Moore",
                    Country: "Crazy Land",
                    City: "Oud-Turnhout",
                    Salary: "$23,738",
                    Actions: null,
                }
            ]

let headers = [];
let body = [];
let i = 0;

for (var client of clients) {
  if (i === 0) {
    for (var key in client) {
      headers.push(key);
    }
  }
  i++;
  var ar = [];
  for (var value of headers)
    ar.push(client[value]);
  body.push(ar);
}

Answer 1

这是一个包含 2 个单行的解决方案

const clients =
[
                    {
                        Id: 0,
                        Name: "Camren Moore",
                        Country: "Wierdo Land",
                        City: "Oud-Turnhout",
                        Salary: "$36,738",
                        Actions: null,
                    },
                    {
                        Id: 1,
                        Name: "Adison Moore",
                        Country: "Crazy Land",
                        City: "Oud-Turnhout",
                        Salary: "$23,738",
                        Actions: null,
                    }
];
            

const header = Object.keys(clients[0]).map(key => key);
const body = clients.map(client => header.map(id => client[id]));

console.log(header)
console.log(body)
                            
           

我没有在 React 中实现它，因为我认为您的问题不是 React 特有的。