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')
);

如果您能帮助我解决问题，我将不胜感激。我现在被困住了。我花了很长时间研究原因，并浏览了各种论坛和帖子，但没有用。

这里有些链接对您有用

Github: ReduxForm Issue

Stack Overflow Same Redux-form multiple times

Answer 1

最后，在浪费时间之后，我找到了答案。我出现空白屏幕的原因是由于道具的Object Object字段中的form。因此，在卸载组件方面存在问题。发生这种情况是因为参数在compose()中以错误的顺序传递。正如redux表单的常见问题解答（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表单存储库中存在给定的问题（Get InitialValues by connecting mapStateToProps，我仍然必须弄清楚用初始值初始化表单时会发生什么。此处connect()中参数reduxForm()和compose()的顺序是相反的。到达该部分后，我将进行更新。

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

1 个答案: