Значение отправки формы Redux не соответствует действительности при отправке формы

Когда я отправляю форму, реквизиты 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));
       });
 };

}`

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


person Anuj Dhanju    schedule 17.02.2017    source источник
comment
Свойство submitting работает только в том случае, если ваш onSubmit является асинхронным (т.е. возвращает Promise). Так ли это?   -  person Erik R.    schedule 17.02.2017
comment
Спасибо за ответ, но я вас не понимаю. Позвольте мне рассказать больше: - я не добавлял никаких асинхронных или синхронизирующих проверок. Но я проверил официальный документ редукционной формы, и в обоих примерах отправка работает. SyncValidatin redux-form.com/6.0.0-alpha.4/ examples/syncValidation asyncvalidation redux-form.com/6.0 .0-alpha.4/examples/asyncValidation   -  person Anuj Dhanju    schedule 17.02.2017
comment
Пожалуйста, покажите свою функцию onSubmit, иначе мы не сможем помочь.   -  person gustavohenke    schedule 22.02.2017
comment
@gustavohenke Я только что обновил код.   -  person Anuj Dhanju    schedule 22.02.2017
comment
@AnujDhanju ты когда-нибудь понял это? Та же проблема   -  person tommyalvarez    schedule 30.07.2018


Ответы (2)


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

<EditForm onSubmit={this.onSubmit} />

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

...

<form onSubmit={handleSubmit(onSubmit)}>

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

person tommyalvarez    schedule 30.07.2018

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

<form onSubmit={handleSubmit(this.props.onSubmit)}>
person Matvii Stelmakh    schedule 06.11.2018