表的行数组反应js / javascript

Question

有没有一种方法可以轻松地将行数组映射到 react js / javascript 中的表？我的数据如下所示：

    rows: [['10kg', '12.5', '1.25', '8'], 
['25kg', '28.75', '1.15', '6'], 
['50kg', '50', '1.0', '5'], 
['100kg', '100', '1.0', '3'], 
['250kg', '250', '1.0', '5'], 
['500kg', '500', '1.0', '5'], 
['1liter', '1000', '1.0', '5']]

"labels": [
        "Weight",
        "Price",
        "Price Per",
        "Amount"

      ],

在 python 中有一些表格，我可以在其中设置列，然后循环遍历数组并通过数组项添加行。 javascript / reactjs有类似的东西吗？

Answer 1

将数据作为列表更改为对象：

let rows = [['10kg', '12.5', '1.25', '8'], 
  ['25kg', '28.75', '1.15', '6'], 
  ['50kg', '50', '1.0', '5'], 
  ['100kg', '100', '1.0', '3'], 
  ['250kg', '250', '1.0', '5'], 
  ['500kg', '500', '1.0', '5'], 
  ['1liter', '1000', '1.0', '5']];

let labels = ["Weight","Price","Price Per","Amount"];

let values = rows.map((row, idx) => {
  let d = {id: idx};
  row.forEach((c, i) => d[labels[i]] = c);
  return d;
});

console.log(values)

let columns = labels.map(l => ({field: l, width: 150}));

console.log(columns);

然后用DataGrid渲染

return <DataGrid rows={values} columns={columns}/>