Reactjs 如何将计算字段中的react final与对象数组一起使用

我有一个

react final form

的对象数组，带有一个

sum

字段。最后我想数一数所有的总数。因此，我使用

最终表单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

会被调用，但总数不会被更新。我猜它没有从必要的字段中选取值。我怎样才能修好它？这是我的代码沙盒。

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

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

我做了两大改变

• 在reduce回调中，我将

  Number（value | | 0）

  更改为

  Number（value.sum | 0）

• 我还将

  updates

  属性设置为对象而不是函数

---

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

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

我做了两大改变

• 在reduce回调中，我将

  Number（value | | 0）

  更改为

  Number（value.sum | 0）

• 我还将

  updates

  属性设置为对象而不是函数

---

最终表单计算文档，比如更新程序可以是：

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

在您的示例中，代码是它们之间的某种混合。另外，

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

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

此外，以下是updater 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

---

最终表单计算文档，比如更新程序可以是：

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

在您的示例中，代码是它们之间的某种混合。另外，

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

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

此外，以下是updater 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

---

非常感谢您的回复！非常感谢您的回复！