React Redux Form (множественные формы) - проблема маршрутизации и обработки состояний

Question

Я строю SPA, используя React.У меня разные формы на разных маршрутах.Я использую Redux Form для создания и поддержания состояния формы.У меня есть компоненты, и большинство из них имеют форму.В reduxForm() я использую свойство form для предоставления уникального имени для формы.Вот код формы.

export default compose(
  connect(mapStateToProps, mapDispatchToProps),
  reduxForm({ form: 'doctor' })
)(Doctor);

В настоящий момент у меня было около 3 форм с различным значением свойства form для разных компонентов.

Вот мой код для корневого редуктора

import { combineReducers } from 'redux';
import { reducer as formReducer } from 'redux-form';
import { USER_LOGOUT } from '../actions/types';
import auth from './auth';
import doctor from './doctor';
import patient from './patient';
import consultation from './consultation';

const appReducer = combineReducers({
  auth,
  doctor,
  patient,
  consultation,
  form: formReducer
});

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

Однако, как только я переключаюсь на другую форму в моем маршруте, React бросаетследующая ошибка в консоли и экран становится пустым.

Интересно также отметить, что prop form опор второго компонента формы не изменяется.Его зарегистрированные поля остаются такими же, как в предыдущей форме.

form prop">

Однако, если я изменю имя свойства в моих корневых редукторах с form: formReducer что-то скажет forms: formReducer тогда маршрутизация работает отлично, но я не могу изменить значение любого ввода в форме, другими словами, состояние не связано с вводом.Итак, в основном то, что я понимаю, что есть какая-то проблема с ReduxForm.Также замечено, что теперь у нас есть два реквизита form и forms.В form вы получаете имя выбранной формы, а в forms вы получаете ее поля.

Вот код моего *Файл 1064 * на тот случай, если он вам нужен.

ReactDOM.render(
  <Provider store={store}>
    <BrowserRouter>
      <AppContainer>
        <Route path="/" exact component={Welcome} />
        <Route path="/signup" component={Signup} />
        <Route path="/dashboard" component={App} />
        <Route path="/patientreg" component={Patient} />
        <Route path="/doctorreg" component={Doctor} />
        <Route path="/consultation" component={Consultation} />
        <Route path="/signout" component={Signout} />
        <Route path="/signin" component={Signin} />
      </AppContainer>
    </BrowserRouter>
  </Provider>,
  document.querySelector('#root')
);

Буду очень признателен, если вы поможете мне разобраться в проблеме.Я застрял на данный момент.Я потратил довольно много времени на изучение причины и просмотрел различные форумы и сообщения SO, но они бесполезны.

Вот несколько ссылок, по которым я прошел, которые могут быть вам полезны

Github: ReduxForm Issue

Переполнение стека Одна и та же форма Redux несколько раз

Answer 1

Наконец, потратив часы, я узнал ответ.Я получил пустой экран из-за Object Object в form поле реквизита.Из-за этого возникает проблема с размонтированием компонента.Это происходит потому, что аргументы передаются в неправильном порядке в compose().Как часто задаваемые вопросы ( Как мне mapStateToProps или mapDispatchToProps? ) из избыточной формы ясно показывает, что сначала вам нужно применить connect(), а затем вы должны передать измененный компонент в reduxForm()

Поэтому я только что обновил свою последнюю строку компонента как

export default compose(
  reduxForm({ form: 'doctor', key: 'doctor'  }),
  connect(mapStateToProps, mapDispatchToProps)
)(Doctor);

Обратите внимание, что я также включил ключ prop, потому что в будущем я хочу инициализировать мою форму с некоторыми значениями предварительной выборки из API, что должно произойтидолжным образом.Пожалуйста, ознакомьтесь с вопросом Динамические имена форм - состояние формы Redux не обновляется при изменении форм

Внимание

Мне все еще приходилось думать, что произойдет, когдаЯ инициализирую форму с начальным значением из-за данной проблемы ( Получить InitialValues, подключив mapStateToProps ) в репо избыточной формы на github.Здесь порядок аргументов connect() & reduxForm() в compose() меняется на противоположный.Я обновлю, как только доберусь до этого раздела.