在react-admin中显示网格列值的总数

Question

在react-admin中，我有一个页面显示余额列表，看起来像这样：

// extra code not included
export const BalanceList = props => (
  <List filters={<BalanceFilter/>} actions={<BalanceActions/>} {...props} perPage={-1}>
    <Datagrid rowClick="edit">
      <TextField source="id" />
      <DateField source="date" />
      <ReferenceField source="account_id" reference="accounts">
        <TextField source="name"/>
      </ReferenceField>
      <TextField source="currency.name" label="Currency" />
      <TextField source="currency.symbol" label="Symbol" />
      <NumberField source="used" options={{ maximumFractionDigits: 4 }} />
      <NumberField source="free" options={{ maximumFractionDigits: 4 }} />
      <NumberField source="total" options={{ maximumFractionDigits: 4 }} />
      <NumberField source="total_value" options={{ maximumFractionDigits: 2 }} />
    </Datagrid>
  </List>
);

我想在列表和分页之间最后显示一行。如果更容易实现，也可以在列表组件内部。

该行应显示已使用金额，费用金额等的总和，以计算这些金额，它应简单地将相对列的所有值相加。例如。 total_value应该是所有“ total_value”行的总和。

我是新来的反应和反应管理员，不知道如何实现这一目标。请在回答中提供一些代码，谢谢。

更新：我尝试使用aside component：

const Aside = ({ data, ids })  => (
  <div style={{ width: 200, margin: '1em' }}>
    <Typography variant="title">Post details</Typography>
    <Typography variant="body1">
      Total value: {ids.map(id => data[id]).reduce((sum, balance) => sum + balance.total_value)}
    </Typography>
  </div>
);

export const BalanceList = props => (
  <List aside={<Aside />} filters={<BalanceFilter/>} actions={<BalanceActions/>} {...props} perPage={-1}>
    <Datagrid rowClick="edit">
      <TextField source="id" />
      <DateField source="date" />
      <ReferenceField source="account_id" reference="accounts">
        <TextField source="name"/>
      </ReferenceField>
      <TextField source="currency.name" label="Currency" />
      <TextField source="currency.symbol" label="Symbol" />
      <NumberField source="used" options={{ maximumFractionDigits: 4 }} />
      <NumberField source="free" options={{ maximumFractionDigits: 4 }} />
      <NumberField source="total" options={{ maximumFractionDigits: 4 }} />
      <NumberField source="total_value" options={{ maximumFractionDigits: 2 }} />
    </Datagrid>
  </List>
);

但是由于某些未知原因，reduce函数抱怨它不能应用于空数组。为什么要空？ data应该是传递给DataGrid的同一数组...

Answer 1

您可以使用组件FunctionField： https://marmelab.com/react-admin/Fields.html#functionfield

import { FunctionField } from 'react-admin'

<FunctionField
  label="Total Value"
  render={record => `${record.total_value + record.total_XXX + ...}`}
/>