Обработка большого количества необязательных полей в избыточной форме - PullRequest
Новая
       11

Обработка большого количества необязательных полей в избыточной форме

0 голосов
/ 15 октября 2018

В приложении, над которым я работаю, есть множество поставщиков, каждый из которых содержит множество продуктов.На данный момент мы рассматриваем около 20 поставщиков и всего 4 тыс. Продуктов (по всем поставщикам), хотя это может легко стать намного больше.

В нашем представлении заказа отображается список поставщиков на боковой стороне страницы.и, щелкнув по поставщику, вы получите список продуктов для этого поставщика.Каждый элемент в списке содержит поле суммы для этого конкретного продукта.По сути, для всей формы требуется 4 тыс. Полей, по одному для каждого продукта.

Мой вопрос - каков наилучший подход для управления таким большим количеством полей при использовании 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
        }
      }
    }
  }
}

Затем для каждой отображаемой строки я просто создаю имя поля суммы с использованием идентификатора поставщика и продукта: 

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

Это избавит от необходимости выполнять какую-либо инициализацию и, следовательно, сохранитсостояние формы намного более управляемо.

На самом деле я нигде не сталкивался с этим и не вижу примеров такого использования в документах redux-form.Есть ли минус у этого второго индексированного подхода?Любая причина, по которой я должен использовать FieldArray вместо?

...