Как использовать response-final-from из вычисляемых полей с массивом объектов

Question

У меня есть массив объектов в 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.

Answer 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

Answer 2

В вашем фрагменте кода есть синтаксическая ошибка, в частности функция калькулятора. Эта версия функции работает:

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 для объекта вместо функции.