const tableRows = [
{
name: 'SickLeave difference',
januaryPayment: '-12000',
febrauaryPayment: '0',
},
{
name: 'Holiday difference',
januaryPayment: '10000',
febrauaryPayment: '25000',
},
{
name: 'Result',
januaryPayment: '0',
febrauaryPayment: '23000',
},
];
<Table headerTextCodes={headerTextCodes} allowFormattedHeader={false}>
{ tableRows.map(row => (
<TableRow>
<TableColumn>
{ row.name }
</TableColumn>
<TableColumn>
{ row.januaryPayment }
</TableColumn>
<TableColumn>
{ row.febrauaryPayment }
</TableColumn>
</TableRow>
))
}
</Table>
const result = {
periodFrom: '2018-05-01',
periodTo: '2018-07-31',
sumDifference: 17873,
periodsPerReceiver: [
{
receiverType: {
code: 'ARBG_PRIV',
name: null,
},
resultsPerMonth: [
{
from: '2018-05-01',
to: '2018-05-31',
resultPerField: [
{
fieldCode: {
code: 'SP',
name: null,
},
previouslyPayed: 0,
newAmount: 2662,
difference: 2662,
},
],
isNewPaymentPeriod: false,
},
{
from: '2018-06-01',
to: '2018-06-30',
resultPerField: [
{
fieldCode: {
code: 'FP',
name: null,
},
paid: 6899,
newAmount: 0,
difference: -6899,
},
],
isNewPaymentPeriod: false,
},
{
from: '2018-07-01',
to: '2018-07-31',
resultPerField: [
{
fieldCode: {
code: 'FP',
name: null,
},
paid: 0,
newAmount: 20012,
difference: 20012,
},
],
isNewPaymentPeriod: false,
},
],
},
{
receiverType: {
code: 'BRUKER',
name: null,
},
resultsPerMonth: [
{
from: '2018-05-01',
to: '2018-05-31',
resultPerField: [
{
fieldCode: {
code: 'FP',
name: null,
},
paid: 0,
newAmount: 0,
difference: 0,
},
],
isNewPaymentPeriod: false,
},
{
from: '2018-06-01',
to: '2018-06-30',
resultPerField: [
{
fieldCode: {
code: 'FP',
name: null,
},
paid: 0,
newAmount: 2098,
difference: 2098,
},
],
isNewPaymentPeriod: false,
},
{
from: '2018-07-01',
to: '2018-07-31',
resultPerField: [
{
fieldCode: {
code: 'FP',
name: null,
},
paid: 0,
newAmount: 0,
difference: 0,
},
],
isNewPaymentPeriod: false,
},
],
},
],
};
我创建了这个函数来构造数据,以便在以后的render函数中使用它来创建表和表行:
const resultPerReceiver = (receiver) => {
const receiverObject = {
receiver: receiver.receiverType,
fields: [],
};
receiver.resultsPerMonth.forEach((monthResult) => {
monthResult.resultPerFields.forEach((resultPerField) => {
const fieldExists = receiverObject.field.find(e => e.field.code === resultPerField.fieldCode.code);
if (fieldExists) {
fieldExists.rows.forEach((row) => {
const rowExists = row.resultPerMonth.find(e => e.from === monthResult.from);
if (!rowExists) {
const newAmount = {
from: monthResult.from,
to: monthResult.to,
amount: resultPerField.newAmount,
};
const paid = {
from: monthResult.from,
to: monthResult.to,
amount: resultPerField.paid,
};
const difference = {
from: monthResult.from,
to: monthResult.to,
amount: resultPerField.difference,
};
fieldExists.rows.find(e => e.name === 'newAmount').resultPerMonth.push(newAmount);
fieldExists.rows.find(e => e.name === 'paid').resultPerMonth.push(paid);
fieldExists.rows.find(e => e.name === 'difference').resultPerMonth.push(difference);
}
});
} else {
receiverObject.field.push({
field: resultPerField.fieldCode,
rows: [
{
name: 'newAmount',
resultPerMonth: [
{
from: monthResult.from,
to: monthResult.to,
amount: resultPerField.newAmount,
},
],
},
{
name: 'paid',
resultPerMonth: [
{
from: monthResult.from,
to: monthResult.to,
amount: resultPerField.paid,
},
],
},
{
name: 'difference',
resultPerMonth: [
{
from: monthResult.from,
to: monthResult.to,
amount: resultPerField.difference,
},
],
},
],
});
}
});
});
return receiverObject;
};
const formattedResult = result.periodsPerReceiver.map(receiver => resultPerReceiver(receiver));
const formattedResult = [
{
receiver: {code: "ARBG_PRIV", name: null },
fields: [
{ field: { code: "SP", name: null },
rows: [
{name: "newAmount", resultPerMonth: [
{from: "2018-06-01", to: "2018-06-31", amount: 2662},
{from: "2018-07-01", to: "2018-07-31", amount: 2662}
]
},
{name: "paid", resultPerMonth: [
{from: "2018-06-01", to: "2018-06-31", amount: 2662},
{from: "2018-07-01", to: "2018-07-31", amount: 2662}
]
},
{name: "difference", resultPerMonth: [
{from: "2018-06-01", to: "2018-06-31", amount: 2662},
{from: "2018-07-01", to: "2018-07-31", amount: 2662}
]
}
]
},
{ field: { code: "FP", name: null },
rows: [
{name: "newAmount", resultPerMonth: [
{from: "2018-06-01", to: "2018-06-31", amount: 2662},
{from: "2018-07-01", to: "2018-07-31", amount: 2662}
]
},
{name: "paid", resultPerMonth: [
{from: "2018-06-01", to: "2018-06-31", amount: 2662},
{from: "2018-07-01", to: "2018-07-31", amount: 2662}
]
},
{name: "difference", resultPerMonth: [
{from: "2018-06-01", to: "2018-06-31", amount: 2662},
{from: "2018-07-01", to: "2018-07-31", amount: 2662}
]
}
]
},
]
},
{
receiver: {code: "BRUKER", name: null },
fields: [
{ field: { code: "SP", name: null },
rows: [
{name: "newAmount", resultPerMonth: [
{from: "2018-06-01", to: "2018-06-31", amount: 2662},
{from: "2018-07-01", to: "2018-07-31", amount: 2662}
]
},
{name: "paid", resultPerMonth: [
{from: "2018-06-01", to: "2018-06-31", amount: 2662},
{from: "2018-07-01", to: "2018-07-31", amount: 2662}
]
},
{name: "difference", resultPerMonth: [
{from: "2018-06-01", to: "2018-06-31", amount: 2662},
{from: "2018-07-01", to: "2018-07-31", amount: 2662}
]
}
]
},
{ field: { code: "FP", name: null },
rows: [
{name: "newAmount", resultPerMonth: [
{from: "2018-06-01", to: "2018-06-31", amount: 2662},
{from: "2018-07-01", to: "2018-07-31", amount: 2662}
]
},
{name: "paid", resultPerMonth: [
{from: "2018-06-01", to: "2018-06-31", amount: 2662},
{from: "2018-07-01", to: "2018-07-31", amount: 2662}
]
},
{name: "difference", resultPerMonth: [
{from: "2018-06-01", to: "2018-06-31", amount: 2662},
{from: "2018-07-01", to: "2018-07-31", amount: 2662}
]
}
]
},
]
},
]
然后,我尝试在render函数中这样渲染函数的结果:
<div className={styles.table}>
{
formattedResult.map(reciever => (
<Table>
{ reciever.fields.map(field => field.rows.map(row => (
<TableRow>
<TableColumn>
<Image
tabIndex="0"
className={styles.expandButton}
src={arrowDownImageUrl}
altCode="Timeline.openData"
/>
{ row.name }
</TableColumn>
{ row.resultPerMonth.map(month => (
<TableColumn>
{ month.amount }
</TableColumn>
))}
</TableRow>
)))}
</Table>
))}
</div>
但是,当我试着这样做的时候,我得到了一个错误:
不变冲突:元素类型无效:应为字符串(对于
但得到:未定义。您可能忘记了从导出组件
它在其中定义的文件,或者您可能混淆了默认值和名称
进口。在tbody中(由表创建)
Here
你可以看到沙盒。
