反应的formik形式的多个re-reders

问题描述

这是我的材料 ui + formik 和 yup 验证表单我有大约 16 个输入字段，如下所示我将控件传递给每个

 <Formik
          initialValues={initialValues}
          validationSchema={validationSchema}
          onSubmit={onSubmit}>
          {({ values,handleChange }) => (
            <>
              <div style={{ height: '10px' }}></div>
              <Grid container spacing={1}>
                <Grid item lg={2} md={3} sm={12} xs={12}>
                  <FormikControl
                    control='input'
                    label='Process'
                    name='process'
                    variant='outlined'
                  />
                </Grid>
                <Grid item lg={2} md={3} sm={12} xs={12}>
                  <FormikControl
                    control='input'
                    label='Sub-Process'
                    name='subProcess'
                    variant='outlined'
                  />
                </Grid>

**我在名为 FormikControl.js 的文件中获取这些道具 **

import React from 'react';
import CheckBoxGroup from './CheckBoxGroup';
import DatePicker from './DatePicker';
import Input from './Input';
import Select from './Select';
import TextArea from './TextArea';
const FormikControl = (props) => {
  const { control,...rest } = props;
  switch (control) {
    case 'input':
      return <Input {...rest} />;
    case 'checkBoxGroup':
      return <CheckBoxGroup {...rest} />;
    case 'textArea':
      return <TextArea {...rest} />;
    case 'select':
      return <Select {...rest} />;
    case 'datePicker':
      return <DatePicker {...rest} />;
    default:
      return null;
  }
};

export default FormikControl;

下面给出的输入字段，我通过 formik mata 在帮助文本中传递错误，字段也更新值

import React from 'react';
import CheckBoxGroup from './CheckBoxGroup';
import DatePicker from './DatePicker';
import Input from './Input';
import Select from './Select';
import TextArea from './TextArea';
const FormikControl = (props) => {
  const { control,...rest } = props;
  switch (control) {
    case 'input':
      return <Input {...rest} />;
    case 'checkBoxGroup':
      return <CheckBoxGroup {...rest} />;
    case 'textArea':
      return <TextArea {...rest} />;
    case 'select':
      return <Select {...rest} />;
    case 'datePicker':
      return <DatePicker {...rest} />;
    default:
      return null;
  }
};

export default FormikControl; 

   

**更改任何输入字段会重新渲染大约 36 次，这使我的表单变慢 **

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）