React Redux 表单（多种表单）——路由和状态处理问题

Question

我正在使用 React 构建 SPA。我在不同的路线上有不同的表格。我正在使用 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 就会在控制台中抛出以下错误并且屏幕变为空白。

同样有趣的是，第二个表单组件 props 的 prop form 没有改变。它的注册字段与以前的表单相同。

但是，如果我将根减速器中的属性的名称从 form: formReducer 更改为 forms: formReducer，那么路由可以正常工作，但我无法更改值形式中的任何输入，换句话说，状态不绑定到输入。所以，基本上我得到的是 ReduxForm 存在一些问题。还注意到现在我们有两个道具 form 和 forms。在 form 中，您获得所选表单的名称，在 forms 中，您获得其字段。

这是我的 index.js 文件的代码，以备不时之需。

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 post 但没有用。

这是我浏览过的一些链接，可能对您有用

Github: ReduxForm Issue

Answer 1

终于，在浪费了几个小时之后，我找到了答案。我出现空白屏幕的原因是道具 form 字段中的 Object Object。因此，卸载组件时出现问题。发生这种情况是因为参数在 compose() 中以错误的顺序传递。由于 redux 形式的 FAQ (How do I mapStateToProps or mapDispatchToProps?) 清楚地表明您首先需要应用 connect() & 然后您应该将修改后的组件传递给 reduxForm()

所以我刚刚将组件的最后一行更新为

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

请注意，我还包含了键 prop，这是因为将来我想使用 api 中的一些预取值来初始化我的表单，这应该会正确发生。请看issue Dynamic form names - Redux form state not updating when changing forms

注意

由于 github 上的 redux 表单回购中的给定问题 (Get InitialValues by connecting mapStateToProps)，我仍然需要弄清楚当我使用初始值初始化表单时会发生什么。这里 compose() 中的参数 connect() & reduxForm() 的顺序是颠倒的。到达该部分后我会更新。

React Redux 表单（多种表单）——路由和状态处理问题

React Redux Form (Multiple Forms) - Routing & State Handling Issue

javascript

reactjs

react-router

redux

redux-thunk