0

react-final-form我有一个带有sum字段的对象数组。最后，我想计算所有总和。所以我使用这样的计算字段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。

4

2 回答 2

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属性设置为对象而不是函数。
于 2019-10-18T22:24:04.013 回答
1

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

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

在您的示例中，代码是它们之间的某种混合。还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 };
    }
});

另外，这里是更新程序 Typescript 定义，供参考：

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
于 2019-10-18T22:26:27.010 回答