最新的 react-redux 和 redux-form 导致严重的性能问题

Question

升级到最新版本（截至今天）：

react-redux: 5.0.7 --> 7.2.1
redux-form: 7.4.2 --> 8.3.6

执行此操作后，在排序、在字段内键入等时注意到性能显着下降，最终显示以下错误导致应用程序崩溃：

Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

The above error occurred in the <Form(Connect(WrapperComponent))> component:...

唯一完成的是升级，代码保持不变。

这是 withForm HOC 和连接的片段（根据文档定义）

 const withForm = reduxForm({
   form: 'form-name',
   initialValues: {
     ...initVals
   },
   onSubmit,
   validate,
   shouldError: () => true
 });

 export default compose(
   connect,
   withForm,
   withStyles(styles)
 )(MyComponent);

有人知道问题出在哪里吗？

Answer 1

出于某种原因升级到最新的表单后（参见问题）redux-form 对我在表单上明确重置属性的方式不满意。

const connectForm = reduxForm({
  form: 'form-name',
  validate: values => {
    const errors = {};
    if (values.middle) {
      values.first = '';
    } else {
      values.second = ''
      values.third = '';
    }
  },
  destroyOnUnmount: false,
  initialValues: {
    ...initValues
  }
});

因此产生了Whosebug。

使用重置内置函数重置那些

import {reset} from 'redux-form';

...

dispatch(reset('myForm'));  // requires form name

最新的 react-redux 和 redux-form 导致严重的性能问题

Latest react-redux and redux-form cause significant performance issues

javascript

reactjs

redux

react-redux

redux-form