如何将 react-final-from 计算字段与对象数组一起使用

Question

我有一个带有sum字段的react-final-form对象数组。最后，我想计算所有金额的总和。所以我使用final-form-calculate中的计算字段，如下所示：

const calculator = createDecorator({
field: /day[d].sum/, // when a field matching this pattern changes...
updates: (value, name, allValues) => {
console.log("Updated field", value, name);
// ...update the total to the result of this function
total: (ignoredValue, allValues) =>
(allValues.day || []).reduce((sum, value) => sum + Number(value || 0), 0);
return {};
}
});

当我在输入中输入值时，调用console.log，但总数不会更新。我想它不会从必要的字段中选择值。我该如何解决它？这是我的代码沙盒 https://codesandbox.io/s/react-final-form-calculated-fields-hkd65?fontsize=14。

Answer 1

代码片段中有一些语法错误，特别是计算器函数。此版本的函数工作：

const calculator = createDecorator({
field: /day[d].sum/, // when a field matching this pattern changes...
updates:  {
// ...update the total to the result of this function
total: (ignoredValue, allValues) => (allValues.day || []).reduce((sum, value) => sum + Number(value.sum || 0), 0),
}
});

我做了两个主要的变化，

• 在减少回调中，我Number(value || 0)更改为Number(value.sum || 0)
• 我还将updates属性设置为对象而不是函数。

Answer 2

最终形式的计算文档，假设更新程序可以是：

更新程序函数的对象或生成 多个字段的更新。

在您的示例中，代码是它们之间的某种混合。此外，value.sum包含输入的数字，而不是value。

以下是使用更新程序函数对象正确执行此操作的方法：

const calculator = createDecorator({
field: /day[d].sum/,
updates: {
total: (ignoredValue, allValues) => (allValues.day || []).reduce((sum, value) => sum + Number(value.sum || 0), 0)
}
});

或多个字段的更新(实际上只有一个，但可能更多(：

const calculator = createDecorator({
field: /day[d].sum/,
updates: (ignoredValue, fieldName, allValues) => {
const total = (allValues.day || []).reduce((sum, value) => sum + Number(value.sum || 0), 0);
return { total };
}
});

另外，以下是更新程序打字稿定义，供参考：

export type UpdatesByName = {
[FieldName: string]: (value: any, allValues?: Object, prevValues?: Object) => any
}
export type UpdatesForAll = (
value: any,
field: string,
allValues?: Object,
prevValues?: Object,
) => { [FieldName: string]: any }
export type Updates = UpdatesByName | UpdatesForAll