Как мы рекурсивно загружаем данные в <Field>в форме Redux - PullRequest
Новая
       14

Как мы рекурсивно загружаем данные в <Field>в форме Redux

0 голосов
/ 09 апреля 2020

Если мне нужно перечислить массив данных bills в форме Redux, как показано ниже:

components / customer.jsx 

import { Field, reduxForm, formValueSelector } from 'redux-form';
import { connect } from 'react-redux';
import { Textfield, Button, List, ListItem, Checkbox, RadioGroup, Radio, Snackbar } from 'react-mdl';
...
...
            <div className="mdl-cell mdl-cell--3-col mdl-cell--4-col-tablet">
              <Field name="bills[0].accountId" component={renderField} type="text" label="Account ID" disabled={billType == 'na'}/>
            </div>
            <div className="mdl-cell mdl-cell--3-col mdl-cell--4-col-tablet">
              <Field name="bills[0].customerId" component={renderField} type="text" label="Customer ID" disabled={billType == 'na'}/>
            </div>

            <div className="mdl-cell mdl-cell--3-col mdl-cell--4-col-tablet">
              <Field name="bills[1].accountId" component={renderField} type="text" label="Account ID" disabled={billType == 'na'}/>
            </div>
            <div className="mdl-cell mdl-cell--3-col mdl-cell--4-col-tablet">
              <Field name="bills[1].customerId" component={renderField} type="text" label="Customer ID" disabled={billType == 'na'}/>
            </div>
...

для используйте сопоставление для следующих целей:

(НЕ РАБОТАЕТ) 

    {bills.map((item, i) => 
    <div className="mdl-cell mdl-cell--3-col mdl-cell--4-col-tablet">
      <Field name="item[i].accountId" component={renderField} type="text" label="Account ID" disabled={billType == 'na'}/>
    </div>
    <div className="mdl-cell mdl-cell--3-col mdl-cell--4-col-tablet">
      <Field name="item[i].customerId" component={renderField} type="text" label="Customer ID" disabled={billType == 'na'}/>
    </div>
    )}

К сожалению, это не работает таким образом, например Field не принимается. Пока bills имеет либо ReferenceError: bills not defined.

Ниже приведен файл действий:

action / customer. js

  load({Meteor, Store}, _id) {
    let customer = Meteor.users.findOne(_id);

    Store.dispatch({
      type: LOAD_CUSTOMER,
      customer: {
        _id: customer._id,
        bills: customer.bills ? customer.bills.map(b => ({...b, registered: b.registered ? 'registered' : 'non-registered'})) : [ {registered: 'na'} ],
        profile: customer.profile,
      }
    });
  },

Я думал о том, стоит ли мне использовать FieldArray, но не работал. Любой совет может предоставить, как сделать это возможным?

Ожидаемый результат: Для возможности рекурсивной загрузки и отображения bills данных в форме. Без необходимости повторять одни и те же коды.

...