React-Admin：在列表中显示之前映射资源数据

Question

我想在向用户显示之前对 API 返回的元素执行其他操作。例如，我有一个值为 0 或 1 的枚举字段，我想显示一些字符串而不是原始值。

const List = (props: any) => (
  <List {...props}>
    <Datagrid rowClick="edit">
      <TextField source="name" />
      <TextField source="type" />
      <TextField source="value" />
    </Datagrid>
  </List>
);

type列是0或1，我想向用户显示一个字符串。 在将

<List>

组件获取的数据传递到我的

<DataGrid>

之前，如何映射它？

Answer 1

const YourChoices = [
    {id: 0, name: 'One'},
    {id: 1, name: 'Two'},
];

const YourTypeInput = (props) => {
    return (
        <SelectInput {...props} choices={YourChoices}/>
    );
};


const List = (props: any) => (
  <List {...props}>
    <Datagrid rowClick="edit">
      <TextField source="name" />
      <TextField source="type" />
      <TextField source="value" />
      <YourTypeInput label="Type" source="xxxxxxx.yyyyyyyy"/>
    </Datagrid>
  </List>
);

Answer 2

如果你有这样的选择：

const TYPE_CHOICES = [
    {id: 0, name: 'One'},
    {id: 1, name: 'Two'},
];

使用

SelectField

显示类型：

  <SelectField source="type" choices={TYPE_CHOICES} />