Ввод формы с использованием Redux Form не обновляется

У меня была та же проблема, и моя ошибка была очень простой.

Вот что у меня было:

import { combineReducers } from 'redux';
import { reducer as forms } from 'redux-form';

import otherReducer from './otherReducer';

export default combineReducers({ otherReducer, forms });

Обратите внимание, что я импортировал redux-form reducer как forms и передавал его как есть в мои combReducers (как я сделал с otherReducer), используя сокращенное обозначение значения свойства ES6 Object.

Проблема в том, что ключ, используемый для передачи redux-form reducer в наши combReducers, ДОЛЖЕН называться form, поэтому мы должны изменить его на:

export default combineReducers({ customer, form: forms });

or

import { reducer as form } from 'redux-form';
export default combineReducers({ otherReducer, form });

Надеюсь, это поможет кому-то другому ...

Если вы используете неизменяемые структуры данных вместо:

import { reduxForm } from 'redux-form';

использовать это:

import { reduxForm } from 'redux-form/immutable';

См. Здесь для получения дополнительной информации http://redux-form.com/6.7.0/examples/immutable/

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

Это было связано с этим:

Я изменил его с input на что-то другое, и он полностью сломал redux-form ТИХОЙ

const TextInput = ({
    input,                                                 <--- DO NOT CHANGE THIS
    placeholder,
    type,
    meta: { touched, error, warning }
  }) => {
    return (
      <div className="row-md">
          <input
            placeholder={placeholder}
            type={type}
            className="form-text-input primary-border"
            {...input}                                     <--- OR THIS
          />
          {touched && ((error && <span>{error}</span>) || (warning && <span>{warning}</span>))}
      </div>
    )
}

Вот остальные мои комментарии, если кто-то хочет их изучить:

<Field
  component={TextInput}
  type="tel"
  name="person_tel"
  placeholder="Mobile Phone Number"
  value={this.props.person_tel}
  onChange={(value) => this.props.updateField({ prop: 'person_tel', value })}
/>

Если вы предоставляете пользовательский компонент ввода для Field, тогда да, вы должны вызвать onChange, переданный в input prop, вашему компоненту. Фактически, вы почти правильно поняли, распространив city.input, но есть загвоздка.

Когда вы определяете компонент без состояния (или просто любую функцию) внутри render() метода, он воссоздается при каждой визуализации. И поскольку этот компонент без состояния передается как опора (component) в Field, он заставляет Field выполнять рендеринг после каждого воссоздания. Таким образом, ваш ввод будет терять фокус при рендеринге CitySelector компонента, поэтому нажатия клавиш не будут фиксироваться.

Вы должны выделить свой компонент без состояния в отдельное определение:

const myInput = ({ input }) => (
  <input type="text" className="form-control" {...input} placeholder="enter a city for a 5 day forecast" />
);

class CitySelector extends Component {
  render() {
    const { isFetching, pristine, submitting, handleSubmit } = this.props;

    return (
      <form className="form-horizontal col-xs-offset-1" onSubmit={handleSubmit(this.fetchWeather)}>
        <div className="form-group">
          <div className="col-md-4 col-xs-4">
            <Field name="city" component={myInput} />
          </div>
          <div className="col-md-3 col-xs-3">
            <button type="submit" className="btn btn-success">Submit</button>
          </div>
        </div>
      </form>
    );
  }
}

Это также делает ваш код более разборчивым.

Дополнительную информацию об этой проблеме можно найти в официальных документах Redux Form. Обратите внимание, что вы, вероятно, можете использовать input по умолчанию, не создавая свой собственный, взгляните на пример простой формы.

Я узнал / моя проблема была моя

form: formReducer

не было в rootReducer.

formReducer должен быть сверху. Мое дело:

const rootReducer = combineReducers({
   general: generalReducer,
   data: combineReducers({
       user:userReducer,
       todoReducer
   }),
       form: formReducer
   });