如何使用 withRouter HOC 和 withFormik 从 react-router-dom 传递历史道具？

Question

我正在使用 Formik 在 React 中验证表单。我想知道如何将历史道具从 withRouter HOC 传递到 withFormik HOC？

import React, { Component } from 'react';
import { withFormik } from 'formik';
import Yup from 'yup';
import FormNaviagtion from './form-navigation';
import { withRouter } from 'react-router-dom';

class StepOne extends Component{
  render(){
    return(
      <div className="add-survey">
        <div className="survey-step">
          <EnhancedFormHistory />
        </div>
      </div>
    )
  }
}

const MyInnerForm = props => {
  const {
    values,
    touched,
    errors,
    dirty,
    isSubmitting,
    handleChange,
    handleBlur,
    handleSubmit,
    handleReset,
  } = props;
  const handlePrev = () => {

  }
  const handleNext = (e) => {
    e.preventDefault();
    props.submitForm();
    props.history.push(`/app/add-survey/step-two`);
  }
  return (
    <div>
      <div className="form-group">
        <label htmlFor="surveyTitle" className="form-label">Survey Name</label>
        <input
          id="surveyTitle"
          placeholder="Eg: Customer Survey"
          type="text"
          value={values.surveyTitle}
          onChange={handleChange}
          onBlur={handleBlur}
          className={errors.surveyTitle && touched.surveyTitle ? 'form-control error' : 'form-control'}
        />
        {errors.surveyTitle && touched.surveyTitle && 
          <div className="input-feedback">{errors.surveyTitle}</div>
        }
      </div>

      <div className="form-group">
        <label htmlFor="surveyCategory" className="form-label">Survey Category</label>
        <select
          id="surveyCategory"
          placeholder="Eg: Customer Survey"
          type="text"
          value={values.surveyCategory}
          onChange={handleChange}
          onBlur={handleBlur}
          className={errors.surveyCategory && touched.surveyCategory ? 'form-control error' : 'form-control'}
        >
          <option value="">Choose a category</option>
          <option value="1">Politics</option>
          <option value="2">Science and Technology</option>
          <option value="3">Entertainment</option>
          <option value="4">Sports</option>
        </select>
        {errors.surveyCategory &&
      touched.surveyCategory && <div className="input-feedback">{errors.surveyCategory}</div>}
      </div>

      <div className="footer-navigation">
        <a href="#" onClick={handlePrev} className="button button-secondary disabled">
          <i className="icon-arrow-back"></i> Return Back
        </a>
        <a href="#" onClick={handleNext} className="button button-primary">
          Proceed Next <i className="icon-arrow-forward"></i>
        </a>
      </div>
    </div>
  );
};

const EnhancedForm = withFormik({
  mapPropsToValues: () => ({ 
    surveyTitle: '',
    surveyCategory: ''
 }),
  validationSchema: Yup.object().shape({
    surveyTitle: Yup.string().required('Survey name is required'),
    surveyCategory: Yup.string().required('Survey category is required')
  }),
  handleSubmit: (values, { setSubmitting }) => {
    setTimeout(() => {
      alert(JSON.stringify(values, null, 2));
      setSubmitting(false);
    }, 1000);
  },
})(MyInnerForm);

const EnhancedFormHistory = withRouter(EnhancedForm);

export default StepOne;

通过运行上述代码，我收到以下错误：

警告：setState(...): 只能更新挂载或挂载 零件。这通常意味着您在未安装的设备上调用了 setState() 零件。这是一个无操作。请检查 Formik 的代码 组件。

Answer 1

您缺少EnhancedForm 的渲染函数。

withRouter 文档在这里： https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/withRouter.md