React Final Form数组对象计算字段不更新问题求助

我看了你的代码，问题核心出在updates函数的返回逻辑上——你现在只是在函数内部定义了total的计算规则，但最后却返回了空对象{}，导致Final Form完全没收到更新total字段的指令。另外，reduce里的取值逻辑也需要调整，确保正确获取每个数组项的sum值。

下面是修复后的完整代码：

const calculator = createDecorator({
  field: /day\[\d\]\.sum/, // 监听day数组中任意项的sum字段变化
  updates: (value, name, allValues) => {
    console.log("Updated field", value, name);
    // 直接返回要更新的字段及计算结果
    return {
      total: (allValues.day || []).reduce(
        (sum, item) => sum + Number(item.sum || 0),
        0
      )
    };
  }
});

关键修复点说明： #

• 返回有效更新对象：原来的代码里你只是在updates函数内部写了total的计算逻辑，但没有把它加入返回值。现在我们直接返回包含total键的对象，明确告诉Final Form需要更新这个字段。
• 正确读取sum属性：原来的reduce中用了Number(value || 0)，这里的value是数组中的每一项对象，必须明确获取它的sum属性（即item.sum），否则会把整个对象转为数字（结果为NaN，导致总和计算错误）。

修改后，当你修改任意day[x].sum输入框的值时，total字段就会自动计算所有sum项的总和并实时更新了。

内容的提问来源于stack exchange，提问作者jupiteror