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>
);

类型列是 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>
);