react-admin 从 redux-form 中排除“记录”答案

【问题标题】：react-admin exclude "record" from the redux-formreact-admin 从 redux-form 中排除“记录”
【发布时间】：2019-07-27 08:22:35
【问题描述】：

当我使用 react-admin 发送 SimpleForm（编辑）请求时遇到问题。该请求包含的参数比我在表单字段中的参数多。

例如我有表格：

<Edit {...props}>
    <SimpleForm>
        <TextInput source="title_new" />
        <TextInput source="age_new" />
    </SimpleForm>
</Edit>

它仅包含 2 个字段，但当我单击“保存”时，请求包含更多字段。我知道这些字段来自 GET_ONE 请求，该请求填充了数据库中的数据。

GET_ONE：

{
title: 'title',
title_new: 'title-new',
age: 'age',
age_new: 'age-new',
}

更新请求UPDATE：

{
title: 'title',
title_new: 'title-new',
age: 'age',
age_new: 'age-new',
}

我希望 UPDATE 将仅包括表单字段（title_new 和 age_new），不包括来自“记录”的 title 和 age 字段。

这些字段在 API 方面给我带来了很多麻烦，我想从所有表单中避免/排除它们，基本上我只想发送带有 SimpleForm 输入的表单输入。

我想到的几个解决方案： 1.“提交前修改表单值”here 2.在restProvider中操作请求

这两种解决方案都不适合我，因为我有很多这样的表单，而 restProvider 代码看起来很糟糕。我也不想“改变”我构建的任何形式。

请提供建议。

【问题讨论】：

对了，我在AOR以前的版本上问过类似的问题：stackoverflow.com/questions/48600487/…

标签： react-admin

【解决方案1】：

这就是 react-admin 的工作方式。如果您希望 UPDATE dataProvider 动词仅发布更改字段（并且可能发送 PATCH 而不是 POST），则必须在 dataProvider 中进行。

我不确定提供程序在更改后会看起来很糟糕：您所要做的就是更改 UPDATE 动词。默认情况下，它看起来像（对于简单的休息提供者）：

            case UPDATE:
                url = `${apiUrl}/${resource}/${params.id}`;
                options.method = 'PUT';
                options.body = JSON.stringify(params.data);
                break;

你只需要像这样更新它：

            case UPDATE:
                url = `${apiUrl}/${resource}/${params.id}`;
                options.method = 'PATCH';
-               options.body = JSON.stringify(params.data);
+               options.body = JSON.stringify(diff(params.data, param.previousData));
                break;

其中diff可以写成：

const diff = (previous, current) => lodash.pickBy(current, (v, k) => previous[k] !== v);

【讨论】：

这看起来像是处理所有请求的正确方法，而不是像addUploadCapabilities
@François Zaninotto：你修改了params.data，所以你应该把动词从PUT改为PATCH。

【解决方案2】：

要选择性地发送刚刚更改的字段，请使用 diff 函数，如下所示：

// in diff.js
import { transform, isEqual, isObject } from 'lodash';

/**
 * Deep diff between two object, using lodash
 * @param  {Object} object Object compared
 * @param  {Object} base   Object to compare with
 * @return {Object}        Return a new object who represent the diff
 */
const diff = (object, base) => {
  return transform(object, (result, value, key) => {
    if (!isEqual(value, base[key])) {
      result[key] =
        isObject(value) && isObject(base[key]) ? diff(value, base[key]) : value;
    }
  });
};

export default diff;

然后：

// in dataProvider.js
update: (resource, params) =>
    httpClient(`${apiUrl}/${resource}/${params.id}`, {
      method: 'PATCH',
      body: JSON.stringify(diff(params.data, params.previousData)),
    }).then(({ json }) => ({ data: json })),

【讨论】：