将 componentWillReceiveProps 重构为 Hook

Question

我正在使用 Formik 效果库来控制我的 onChange 效果。但是 Formik 效果库已损坏，所以我需要编写自己的效果来触发 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);
                    }
                  }}
                />

此效果的目的是在用户选择不同类型的表单时重置初始值，因为初始值只呈现一次。并且当前的 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添加了一些依赖项