Редукция формы "отправки" значение не соответствует действительности при отправке формы

Question

Когда я отправляю форму, реквизиты submitSucceeded становятся действительными, нетронутые также работают нормально, но отправка реквизитов не изменяется в форме отправки. Я приложил соответствующий код. Пожалуйста, предложите мне, как я могу решить эту проблему.

import React from 'react'
import { Field, reduxForm } from 'redux-form'
import FileInput from '../FileInput'

import 'react-widgets/dist/css/react-widgets.css';
import './reactForm.css';

const EditForm = (props) => {
const { handleSubmit, submitSucceeded, pristine, submitting, owners,      cities, compound, avatarUrl, changeAvatar } = props;
return (
  <form onSubmit={handleSubmit}>
    <div className="row padding-20-0">
      <div className="col-md-4">
        <div className="box-upfile cursor" style={{backgroundImage: `url(${avatarUrl})`}} >
          <div className="editImgComp" >
            <i className="sprite-icon icon-030" onClick={()=>{changeAvatar(null); props.change('avatar', null)}}/>
            <label html="imageBrowse">
              <FileInput 
                onDone={(file)=> {changeAvatar(file.file); props.change("avatar", file.file)}}
                type="file" className="hidden" id="imageBrowse"/>
              <i className="sprite-icon icon-031"/>
            </label>
          </div>
        </div>
      </div>
    </div>
    <div className="row">
      <div className="text-right col-xs-6">
        {
          submitSucceeded ?
            <button type="button" className="btn ls-btn-red cursor" disabled={pristine || submitting || submitSucceeded}>
              <i className='fa fa-circle-o-notch fa-spin'></i> Saving
            </button>
            :
            <button type="submit" className="btn ls-btn-red cursor" disabled={pristine || submitting} onClick={handleSubmit} >Save</button>
        }
      </div>
    </div>
  </form>
 )
}

export default reduxForm({
  form: 'compoundForm'  // a unique identifier for this form
})(EditForm)

Контейнер:-

handleSubmit(data) {
    this.props.dispatch(compoundSave(data));
} 

Действие: -

export function compoundSave(data) {
  const id = data.id;
  const config = {
   method: 'put', 
   body: JSON.stringify({compound: data}),
 };
 return callApi('/v1/compounds/'+id, {}, config, compoundSaveRequest, compoundSaveSuccess, compoundSaveFailure);
}

Вызовите метод Api: -

`export function callApi(path, params, config, request, onRequestSuccess, onRequestFailure) {
  const API_ROOT = 'http://api.dev.leasing.clicksandbox.com:8080';
  const idToken = localStorage.getItem('id_token');

  let url = API_ROOT+path;
  url = buildUrlWithQueryString(url, params);

  return dispatch => {
    dispatch(request);

    return fetch(url, config)
      .then(checkStatus)
      .then(parseJSON)
      .then((json) => {
        if (!json.success) {   // (response.status < 200 || response.status > 300)
         json.error &&
         Toastr.error(json.error);
         dispatch(onRequestFailure(json));
       } else {
         json.message &&
         Toastr.success(json.message);
         dispatch(onRequestSuccess(json));
       }
     }).catch((error) => {
         const exceptionMessage = {
           success: false,
           error: "Something went wrong!"
         }
        dispatch(onRequestFailure(exceptionMessage));
       });
 };

} `

Пожалуйста, дайте мне знать, если мне нужно объяснить больше.

Answer 1

Для любого другого, прибывшего сюда через год, например, когда я искал ответы и не видел код Контейнера... я могу заключить, что проблема в том, что вы определили метод handleSubmit в Контейнере и отправили его в качестве опоры в EditForm. Проблема заключается в том, что Компонент, к которому применен HOC reduxForm (), в данном случае EditForm, создаст свою собственную команду handleSubmit, и поэтому возникает конфликт, приводящий к неправильному поведению формы при отправке. Чтобы решить эту проблему, вы должны были отправить реквизит в EditForm с другим именем скажем

<EditForm onSubmit={this.onSubmit} />

А затем внутри компонента EditForm используйте его так:

...

<form onSubmit={handleSubmit(onSubmit)}>

Таким образом, будет предоставлена ​​поддержка отправки компонента reduxForm, если обработчик отправки вернет обещание.

Answer 2

Ты должен позвонить handleSubmit() метод с обработчиком передается компоненту:

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