添加redux-form字段数组的值

时间:2018-04-02 22:23:23

标签: reactjs redux redux-form

对于FieldArray中的每个新项目,我希望将FieldArray中Field的内容添加到一起,称为total。

因此,在表单状态中明智地使用此数据结构。

test.0.total + test.1.total + test.2.total = testTotal

我不确定访问表单中数据的选项。如果我特意列出了期望的字段,formValueSelector工作得很好,但考虑到这是一个FieldArray,我不知道在任何给定时间会有多少项。如何循环数组结构以添加这些字段?

我目前正在使用看起来像这样的选择器来返回数组。

const selector = formValueSelector('mainForm');
      export const mapState = (state, ownProps) => {
        const Total = selector(state, 'test');
        return { Total };
      }

我怎样才能在选择器中构建循环机制?

像这样的东西......,但不是动态的。

    const selector = formValueSelector('mainForm');
      export const mapState = (state, ownProps) => {
        const test1 = selector(state, 'test.0.total');
        const test2 = selector(state, 'test.1.total');
        const test3 = selector(state, 'test.2.total');
       return { test1, test2, test3, 
        total: test1 + test2 + test3 };
      }

添加这样的东西......

const test = selector(state, "test");
const sum = test.reduce((total, item) => total + Number(item.total), 0);

甚至在回报中

sum: test.reduce((total, item) => total + Number(item.total), 0);

是一个TypeError:无法读取属性' reduce'未定义的......即使我能看到

我可以看到该状态中的数组未定义...有没有办法解决这个问题?

enter image description here

1 个答案:

答案 0 :(得分:1)

const sum = arr.reduce((total, item) => total + Number(item.total), 0);

arr.reduce正是您要找的。

如果您的数据结构不包含item.total的对象,请将该部分替换为item