React-admin:如何在react-admin v3.2.*中创建用户配置文件表单？

Question

我注意到关于如何在React-Admin中创建用户设置(配置文件)的官方文章已经过时了(https://marmelab.com/blog/2019/03/07/react-admin-advanced-recipes-user-profile.html)。

我遵循了示例并尝试使用新的DataProvider，但无法使用Edit视图(它只显示没有字段的空白Card组件，尽管我已经按照示例中描述的方式对其进行了设置)。

我花了几天时间研究如何以最简单/干净的方式实现它，但关于它的信息非常少。

有人知道如何在react-admin 3.2中做到这一点吗？*

这可能会对其他有同样问题的人有所帮助。任何帮助都将不胜感激！谢谢!

Answer 1

我也有同样的问题。查看传递给toreact admin的Edit的属性，我发现record属性是未定义的。这是因为数据提供程序的getOne方法返回的记录中的id字段与编辑组件上硬编码的id属性不同。一旦设置为匹配，则读取/编辑均可正常工作。

我的工作代码：

// remove staticContext to avoid React 'unknown prop on DOM element' error
export const PrincipalEdit = ({ staticContext, ...props }: { staticContext: any; props: any }) => {
  return (
    // `id` has to match with `id` field on record returned by data provider's `getOne`
    // `basePath` is used for re - direction
    // but we specify no redirection since there is no list component
      <Edit {...props} title="My Profile" id="my-profile" resource={b.PRINCIPAL} basePath="my-profile" redirect={false}>
        <SimpleForm>
          <TextInput source="firstName" validate={required()} />
        </SimpleForm>
      </Edit>
  );
};

Answer 2

问题是目前react-admin是如何存储数据的(我还没有检查它以前是如何存储的)。现在，每个数据条目都按其id保存在store对象中(原因很明显)。我认为最好的方法是修改数据提供程序。

if (resource === 'profile') {
  const { id, ...p } = params; // removes the id from the params
  if (p.data)
    delete p.data.id; // when updates there is data object that is passed to the backend

  return dataProvider(type, resource, { ...p, id: '' }) // set the id just empty string to hack undefined as http param
    .then(({ data }) => {
      return Promise.resolve({
        data: {
        ...data,
          id // return the data with the initial id
        }
      });
    });
}

这样，后端端点可以只返回实体/profile的主端点上的对象。如果不将id prop设置为''，它将尝试获取/profile/undefined，因为id prop已从params对象中删除。如果您在更新时没有从数据对象中删除id prop，这取决于用于更新记录的后端sql查询(假设您正在使用某种db)，它可能会尝试按此id进行设置或搜索。

在Edit组件中，您可以传递任何id，但必须传递某些内容。

Additional:如果您使用NestJS作为Crud包的后端，这些@Crud参数可能会有所帮助

  ...
  params: {
    id: { // the routes won't have params, very helpful for me/profile controller
      primary: true,
      disabled: true,
    },
  },
  routes: {
    only: ["getOneBase", "updateOneBase"],
  },
  ...