將componentWillReceiveProps重構為Hook

Question

我正在使用Formik效果庫來控制我的onChange效果。 但是Formik效果庫已損壞，因此我需要編寫自己的Effect來觸發Formik onChange()函數。 我為<Effect />寫了一個class componentWillReceiveProps組件。 但是，我所有的組件都是功能組件。 我被要求將我的class組件重構為功能組件。 我仍然是React的初學者，所以我在努力重構它。

這是我的課<Effect />組件

// TODO: refactor with HOOK!

import React from 'react';
import PropTypes from 'prop-types';
import { connect } from 'formik';

class Effect extends React.Component {
  componentWillReceiveProps(nextProps) {
    const { formik } = this.props;
    const { onChange } = this.props;
    const { values, touched, errors, isSubmitting } = formik;
    const {
      values: nextValues,
      touched: nextTouched,
      errors: nextErrors,
      isSubmitting: nextIsSubmitting
    } = nextProps.formik;
    if (nextProps.formik !== formik) {
      onChange(
        {
          values,
          touched,
          errors,
          isSubmitting
        },
        {
          values: nextValues,
          touched: nextTouched,
          errors: nextErrors,
          isSubmitting: nextIsSubmitting
        }
      );
    }
  }

  // eslint-disable-next-line
  render() {
    return null;
  }
}

Effect.defaultProps = {
  formik: {
    errors: {},
    touched: {},
    values: {},
    isSubmitting: false
  },
  onChange: () => {}
};

Effect.propTypes = {
  formik: PropTypes.shape({
    errors: PropTypes.shape({}),
    touched: PropTypes.shape({}),
    values: PropTypes.shape({}),
    isSubmitting: PropTypes.bool
  }),
  onChange: PropTypes.func
};

export default connect(Effect);

我內心深處

<Effect
 onChange={(currentFormikState, nextFormikState) => {
                    if (
                      currentFormikState &&
                      nextFormikState &&
                      currentFormikState.values.pdsaType !==
                        nextFormikState.values.pdsaType
                    ) {
                      resetForm(initialValues[nextFormikState.values.type]);
                      setType(nextFormikState.values.type);
                    }
                  }}
                />

此效果的目的是在用戶選擇其他類型的表單時重置InitialValue，因為initialValue僅呈現一次。 並且當前的Formik庫不支持onChange（）函數。

該currentFormikState是初值即Formik渲染，並且nextFormikState是type值用戶選擇。

Answer 1

我不知道formik，但是我想從您的代碼中您可以轉換成這樣的功能組件

 import React, { useEffect, useRef } from "react"; function Effect(props) { const { formik, onChange } = props; const { values, touched, errors, isSubmitting } = formik; const formVariableRef = useRef(); const formFormikRef = useRef(); useEffect(() => { formFormikRef.current = formik; formVariableRef.current = { values, touched, errors, isSubmitting }; if (formik !== formFormikRef) { onChange( { value: formVariableRef.current.values, touched: formVariableRef.current.touched, errors: formVariableRef.current.errors, isSubmitting: formVariableRef.current.isSubmitting }, { values, touched, errors, isSubmitting } ); } return function() { formFormikRef.current = formik; formVariableRef.current = { values, touched, errors, isSubmitting }; }; }, [values, touched, errors, isSubmitting, formik]); //try add this return null } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> 

嘗試用此替代您的班級形式。 其余的可能不需要更改。

更新嘗試添加上面的代碼。 我只是添加一些依賴關系到useEffect