отправить избыточную форму не передавая значения формы

Question

У меня есть избыточная форма и при отправке я не могу получить значения формы в методе отправки.

Моя форма:

 import React from 'react';
import { Field, reduxForm } from 'redux-form/immutable';
import { connect } from 'react-redux';
import DynamicInputField from '../DynamicForm/DynamicInputField';
import './MyForm.css';
import { getInfo, saveInfo } from '../../redux/feature/baseInfo/baseInfoActions';
import Header from '../UI/Header/Header';
import Footer from '../UI/Footer/Footer';
import uuid from 'uuid';

class MyForme extends React.Component {
    componentDidMount() {
        const id = this.props.match.params["id"];
        if (id)
          this.props.getInfo(id);
      }

      formFields = [
        { name: 'FirstName', inputType: 'text', label: 'First Name' },
        { name: 'LastName', inputType: 'text', label: 'Last Name' }
      ]

      handleOnSave = () => {
        alert("save");
        return;
      }

      handleOnCancel = () => {
        alert("cancel")
        return;
      }

      submitInfo(data){
        console.log(data);
      }

      buttons = [
        { id: uuid(), text: "Save", shouldDisplay: true, isSubmit: true },
        { id: uuid(), text: "Cancel", shouldDisplay: true, callbackFunction: this.handleOnCancel }
      ]

      handleButtonClick = (buttonId) => {
        let button = this.buttons.find(b => b.id === buttonId);
        button.callbackFunction();
      }

      render() {
        const headerText = this.props.match.params["id"] ? "Edit" : "New";
        const {handleSubmit} = this.props;
        return (
          <div className='my-form'>
            <form onSubmit={handleSubmit(this.submitInfo)}>
              <Header text={headerText} />
              {this.formFields.map(formField => (
                <div key={formField.name}>
                  <Field
                    name={formField.name}
                    component={(field) => {
                      return (
                        <DynamicInputField formField={formField} {...field}/>
                      )
                    }}
                  />
                </div>
              ))}
              <Footer buttons={this.buttons} onButtonClicked={this.handleButtonClick} />
            </form>
          </div>
        )
      }
    }

    const mapStateToProps = ({ baseInfo }) => {
      return {
        initialValues: baseInfo.info.data
      };
    };

    const mapDispatchToProps = dispatch => {
      return {
        getInfo: id => dispatch(getInfo(id)),
        saveInfo: info => dispatch(saveInfo(info))
      };
    };

    export default connect(
      mapStateToProps,
      mapDispatchToProps
    )(reduxForm({
      form: 'MyForm', 
      enableReinitialize: true
    })(MyForm));

все работает хорошо, но когда я отправляюФорма Я не вижу значения формы. Значения:

Карта {размер: 14, _root: BitmapIndexedNode, ownerID: не определено, __hash: undefined, __altered: false} размер: 14__altered: false__hash: undefined__ownerID:undefined_root: BitmapIndexedNode {ownerID: undefined, bitmap: 356532454, узлы: Array (10)} __ proto : KeyedCollection

компонент нижнего колонтитула:

import React from "react";
import PropTypes from "prop-types";
import Button from "react-bootstrap/Button";
import uuid from "uuid";
import "./Footer.css";

class Footer extends React.Component {
  static propTypes = {
    buttons: PropTypes.arrayOf(
      PropTypes.shape({
        id: PropTypes.value,
        text: PropTypes.string,
        shouldDisplay: PropTypes.bool,
        callbackFunction: PropTypes.func
      })
    ),
    onButtonClicked: PropTypes.func
  };

  handleButtonClick = (buttonId, isSubmit) => {
    if (!isSubmit) this.props.onButtonClicked(buttonId);
  };

  render() {
    return (
      <div className="footer-wrapper">
        {this.props.buttons.map(button => (
          <Button
            key={uuid()}
            className="footer-button"
            type={button.isSubmit ? "submit" : "button"}
            onClick={() => this.handleButtonClick(button.id, button.isSubmit)}
          >
            {button.text}
          </Button>
        ))}
      </div>
    );
  }
}

export default Footer;

Я также пробую это:

<form onSubmit={values => this.props.saveInfo(values)} >

и результаты значений:

пузыри: true отменимо: true currentTarget: форма defaultPrevented: false dispatchConfig: {phasedRegistrationNames: {…}, зависимости: Array (1),isInteractive: true} eventPhase: 2 isDefaultPrevented: ƒ functionThatReturnsFalse () isPropagationStopped: ƒ functionThatReturnsFalse () isTrusted: true nativeEvent: Event {isTrusted: true, тип:"submit", target: form, currentTarget: form, eventPhase: 2,…} target: form timeStamp: 21285.89999995893 тип: "submit" _dispatchInstances: FiberNode {tag: 5, ключ: null, elementType: "form", type: "form ", stateNode: form,…} _dispatchListeners: ƒ onSubmit (values) _targetInst: FiberNode {tag: 5, ключ: null, elementType:" form ", тип:" form ", stateNode: form,…} proto: Объект

В чем моя ошибка?

Спасибо

Answer 1

Хорошо, я понял, следующие данные верны

Map {size: 14, _root: BitmapIndexedNode, ownerID: undefined, __hash: undefined, __altered: false}size: 14__altered: false__hash: undefined__ownerID: undefined_root: BitmapIndexedNode {ownerID: undefined, bitmap: 356532454, nodes: Array(10)}__proto: KeyedCollection

Я извлек данные формы, как это

    submitInfo = (data) => {
        const str= JSON.stringify(data, null, 2);
        const obj = JSON.parse(str);
//dispatch save action with this obj
      }