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

【问题标题】：React Redux Form (Multiple Forms) - Routing & State Handling IssueReact Redux 表单（多种表单） - 路由和状态处理问题
【发布时间】：2019-07-08 02:06:03
【问题描述】：

我正在使用 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的propform并没有改变。其注册字段与之前的表单保持一致。

但是，如果我将根 reducer 中的属性名称从 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 帖子，但没有用。

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

Github: ReduxForm Issue

Stack Overflow Same Redux-form multiple times

【问题讨论】：

标签： javascript reactjs redux react-router redux-thunk

【解决方案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 的一些预取值来初始化我的表单，这应该会正确发生。请看问题Dynamic form names - Redux form state not updating when changing forms

注意

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

【讨论】：