Как я могу получить доступ к указанному индексу из fieldArray с formValueSelector?

Question

Я использую formValueSelector и хочу получить доступ к fieldArray с указанным индексом. Это мой компонент renderDetail:

    renderDetail = ({fields, meta: { error,submitFailed}}) => (
      <dl>
        <dt>
          <button type="button" className= 'btn btn-primary' onClick={() => fields.push()}>Add
      Detail</button>
          {submitFailed && error && <span>{error}</span>}
        </dt>
        { fields.map((registerDetail, index) =>

          <dd key={index}>
          <br></br>
            <button className= 'btn btn-light mr-2'
              type="button"
              title="Remove detail"
              onClick={() => { fields.remove(index)
                if(fields.length == 0 || fields.length === undefined){

                }
                try{
                for(let x in fields){
                  fields.remove(index) 
                  let d = fields.selectedIndex;
                  if(fields.remove(index) && d >= 1 && d< fields.length ){
                  fields.removeAll(index);
                  }
                }
              }catch{console.info("deletes non numeric index")}

                }}> Delete </button>

       <h4>RegisterDetail #{index + 1}</h4>

     <Field 
        id={`${registerDetail}._id`}
        name={`${registerDetail}.quantity`}
        component= {NumberPickerInteger}
        placeholder= '...quantity'
        label = "Quantity" 
     />
     <br></br>
  <h3><b>Producto</b></h3>
     <Field 
        id={`${registerDetail}._id`}
        name={`${registerDetail}.product.code`}
        type="number"
        component= {RenderFieldNumeric}
        placeholder='...product's code'
        label = "Product's code" 
     />
     <Field 
        id={`${registerDetail}._id`}
        name={`${registerDetail}.product.name`}
        type="text"
        component= {RenderField}
        placeholder='...product's name'
        label = "Product's name" 
     />
     <Field 
        id={`${registerDetail}._id`}
        name={`${registerDetail}.product.price`}
        component= {registerDetail}
        placeholder= '...Price'
        label = "Product's price" 
     />
     <br></br>
    <h3><b>Subtotal</b></h3>
     <Field 
        id={`${registerDetail}._id`}
        name={`${registerDetail}.subtotal`}
        component= {SubtotalWidget}
        placeholder= '...subtotal'
        label = "Subtotal" 
     />

       </dd>
        )
        }

        {error && <dt className="error">{error}</dt>}
      </dl> 
    );

Это мой метод промежуточных итогов, для которого я вставляю детали для его вычисления:

    const calculatedSubtotal = (detail) => {

     return detail.map(detailItem => {
       return detailItem.quantity * detailItem.product.price;
         });
      };

Возможно, ошибка в willReceiveProps и componentDidUpdate:

     componentWillReceiveProps = nextProps => {
          // Load Contact Asynchronously
          const { bill } = nextProps;
          const { change, detail} = nextProps; //detail should be an array
             if (bill._id !== this.props.bill._id) {
               // Initialize form only once
                this.props.initialize(bill);
                this.isUpdating = true;
                    }
           if(this.props.detail !== nextProps.detail
              ){

            change(`detail[${this.props.index}].subtotal`,calculatedSubtotal(detail));
                 //maybe here the syntax of detail fieldArray with specify index be incorrect.
               //In calling to calculatedSubtotal how should be syntax fieldArray from renderDetail
                //Redux form
             }

           };

        componentDidUpdate(prevProps,prevState,snapShot){

              const {change} = prevProps;

             const {detail} = prevProps; //same, detail should be an array


              if(this.props.detail !== prevProps.detail
              ){
             change(`detail[${this.props.index}].subtotal`,calculatedSubtotal(detail));
              //maybe here the syntax of detail fieldArray with specify index be incorrect.
              //In calling to calculatedSubtotal how should be syntax fieldArray from renderDetail
              //Redux form
          }


       }
       shouldComponentUpdate(nextProps, nextState) {
           return this.props.detail !== nextProps.detail
           } 

В методе рендеринга я получаю доступ к массиву полей следующим образом:

             <FieldArray
                 name='detail'
                 component={this.renderDetail}
                 label='Detail'
                 />

Теперь это мой makeMapStateToProps:

       const valueSelector = formValueSelector('bill');

        const makeMapStateToProps = () => {
           const mapStateToProps = (state,props) => {
           return {
        detail: valueSelector(state, `detail[${props.index}]`), //Maybe here is the error.
                                                         //I'm not iterating detail


             initialValues: {

                }
                }
             }
        return mapStateToProps;
          }

Проблема в том, что я ' Я не могу получить доступ к указанному индексу из массива сведений.

Я в передней части и использую форму. По форме вижу кнопку «Добавить детали». Я нажимаю на эту кнопку, и каждый раз, когда я нажимаю на эту кнопку, открывается уменьшенная форма, которая является формой детализации. Теперь в подробной форме, когда я вставляю данные в количестве и цене (product.price), я должен увидеть значение, отраженное в промежуточной сумме. Однако этого не происходит. Возможно, я не правильно обращаюсь к полю детализации Array.

Я хотел бы знать, что не так и как я могу это исправить.

Это интерфейс. На стороне формы.