Question

我有一个复选框数组呈现为：

<form>
  {items.map(item => {
    <Field component="input" 
           type="checkbox"
           name=`items.{item.id}`
  })}
</form>

这给了我一个数组值：

 {
           //index: 0,   1,     ,…, 120, 121, …    ,231, …                      
     item: [undefinded,undefined,…,true,undefined,…,true,undefined,…]
 }

相反，我更喜欢一个Object，（主要是为了避免创建一个大数组）：

{
    120: true,
    131: true,
    165: false 
}

当itemId为整数时，有没有办法强制使用redux-form输出对象。

注意：如果itemId作为字符串传递，则redux-form会返回一个Array。

类似的帖子，但解决方案不适用于redux-form 7.

Answer 1

当您从状态映射表单字段时，您可以使用过滤器函数：

checkboxArray.filter(checkbox =>{
    return checkbox; // if its undefined, it'll get dropped from the array
});

关联数组和对象在Javascript中实际上是相同的，因此不再需要工作，因此过滤掉数组中的所有未定义项会获得您正在寻找的对象。

Answer 2

问题是字段名称是一个数字。尝试给它加上前缀。

代替'102'>>'myField_102'

Answer 3

我在寻找解决同一问题的方法时碰到了这一点。

最终对我有用的是在将初始值传递给表单时初始化对象

const ItemsForm = ({ items }) => {
    return <form>
        {items.map(item => {            
            <Field component="input"
                type="checkbox"
                name={`items.${item.id}`} />
        })}
    </form>
}

export default reduxForm({
    form: 'itemsForm'
})(ItemsForm)

像这样初始化表格：

<ItemsForm initialValues={{items: {}}} />

redux-form 7强制数组的复选框返回Object而不是Array

3 个答案: