时间戳

首页 > 解决方案 > 处理 redux-form 中的大量可选字段

javascript - 处理 redux-form 中的大量可选字段

问题描述

我正在开发的应用程序有一系列供应商，每个供应商都包含一系列产品。我们正在寻找大约 20 家供应商，目前（所有供应商）总共有 4k 种产品，尽管这很容易变得更大。

我们的订购视图在页面一侧显示供应商列表，然后单击供应商会呈现该供应商的产品列表。列表中的每个项目都包含该特定产品的金额字段。基本上整个表单需要 4k 个字段，每个产品一个。

我的问题是在使用时控制这么多字段的最佳方法是什么redux-form？

第一个解决方案可能是使用 redux-form<FieldArray />并具有如下形式的结构：

{
  suppliers: [
    {
      id: 'supplier0',
      notes: 'Some notes for this supplier',
      products: [
        {
          id: 'product0',
          amount: 10
        }
      ]
    }
  ]
}

但是，如果我没记错的话，这将需要使用所有 4k 产品的条目来初始化表单（因为在使用表单时不会动态添加或删除它们）。这也意味着表单上的任何类型的处理，例如提交，都需要遍历所有产品以检查它们是否具有金额值。

或者我一直在想我可以使用这样的索引结构：

{
  suppliers: {
    {{supplierId}}: {
      notes: 'Some notes for this supplier',
      products: {
        {{productId}}: {
          amount: 10
        }
      }
    }
  }
}

然后对于每个呈现的行，我只需使用供应商和产品 ID 构造金额字段名称：

<Field name={`suppliers.${supplierId}.products.${productId}.amount`} />

这将不必进行任何初始化，从而使表单状态更易于管理。

redux-form我在其他任何地方都没有真正遇到过这种情况，并且在's 的文档中看不到这种用例的任何示例。第二种索引方法有什么缺点吗？我绝对应该使用的任何理由FieldArray？

标签： javascriptreactjsformsreduxredux-form

解决方案

推荐阅读