Блог

Главная - Вопросы по программированию - Последние версии react-redux и redux-form вызывают значительные проблемы с производительностью

Последние версии react-redux и redux-form вызывают значительные проблемы с производительностью

#javascript #reactjs #redux #react-redux #redux-form

#javascript #reactjs #сокращение #реагировать-redux #упрощенная форма #redux #react-redux #redux-form

Вопрос:

Обновлен до последних версий (на сегодняшний день):

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

После этого была замечена значительная потеря производительности при сортировке, вводе внутри полей и т.д. и, в конечном итоге, следующая ошибка показывает, что приложение ломается:

Ошибка: превышена максимальная глубина обновления. Это может произойти, когда компонент повторно вызывает setState внутри componentWillUpdate или componentDidUpdate. React ограничивает количество вложенных обновлений, чтобы предотвратить бесконечные циклы.

Вышеуказанная ошибка произошла в компоненте <Form(Connect(WrapperComponent))>:…

Единственное, что было сделано, это обновление, код остался прежним.

Вот фрагмент с формой HOC и connect (определенный в соответствии с документами)

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

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

Кто-нибудь знает, в чем может быть проблема?

Ответ №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
  }
});

Следовательно, создается stackoverflow.

Используется встроенная функция сброса для сброса этих

 import {reset} from 'redux-form';

...

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