Я изменил функциональный компонент, содержащий FORMIK, на компонент класса и получил ошибки. Почему? - PullRequest
Новая
       5

Я изменил функциональный компонент, содержащий FORMIK, на компонент класса и получил ошибки. Почему?

0 голосов
/ 10 апреля 2020

У меня есть функциональные компоненты, которые содержат formik: 

const SignupForm = () => {

    const {handleSubmit, values, handleChange, errors, handleBlur, isSubmitting, setSubmitting} = useFormik({  
      initialValues: {
          /....
      },
        validateOnBlur: false, 
        validateOnchange: false,
        validationSchema: yup.object().shape({    
          /.....
      }),   
      onSubmit: async (formValues) => {
          console.log('submit', formValues);
          setSubmitting(true);
          try {
              /.....
          } catch(e) {
              console.error(e);   
          } 
      },  
    });

   return (
   <form className="fform" onSubmit={handleSubmit}>   
      /....
       <button type="submit" disabled={isSubmitting}>Submit Form</button>       
   </form>
   );
};

, но мне нужно было изменить этот компонент на класс, и я сделал: 

class SignupForm extends React.Component {

    const {handleSubmit, values, handleChange, errors, handleBlur, isSubmitting, setSubmitting} = useFormik({  
      initialValues: {
          /....
      },
        validateOnBlur: false, 
        validateOnchange: false,
        validationSchema: yup.object().shape({    
          /....
      }),   
      onSubmit: async (formValues) => {
          console.log('submit', formValues);
          setSubmitting(true);
          try {
              /.....
          } catch(e) {
              console.error(e);   
          } 
      },  
    });
  render() {  
   return (
   <form className="fform" onSubmit={handleSubmit}>   
      /.....
       <button type="submit" disabled={isSubmitting}>Submit Form</button>       
   </form>
   );
  }
};

, и я получил ошибки: 

./src/components/Signup/SignupForms.js
  Line 11:11:  Parsing error: Unexpected token

   9 | class SignupForm extends React.Component {
  10 |  
> 11 |     const {handleSubmit, values, handleChange, errors, handleBlur, isSubmitting, setSubmitting} = useFormik({  
     |           ^         
  12 |       initialValues: {
  13 |           username: '',
  14 |           password: '',

Скриншот ошибки

screenshot error

Как исправить эту ошибку? Пожалуйста, помогите мне написать компонент класса, чтобы не было ошибок.

1 Ответ

0 голосов
/ 10 апреля 2020

Вы не можете использовать зацепки в компонентах класса.

Есть библиотека (https://github.com/salvoravida/react-universal-hooks), которая позволит вам, но это не считается лучшей практикой для смешивания два. Команда React ввела это ограничение, чтобы заставить вещи оставаться в здравом уме.

Вам придется использовать withFormik компонента более высокого порядка или их <Formik /> компонент, который использует взамен рендеринга реквизита.

Вот пример, который я собрал, который использует их компонент рендеринга реквизита, поскольку конвертировать его было довольно просто. 

class SignupForm extends React.Component {


    render() {
        const formikProps = {
            initialValues: {
                //....
            },
            validateOnBlur: false,
            validateOnchange: false,
            validationSchema: yup.object().shape({
                //....
            }),
            onSubmit: async (formValues, { setSubmitting }) => {
                console.log('submit', formValues);
                setSubmitting(true);
                try {
                    ///.....
                } catch (e) {
                    console.error(e);
                }
            },
        };
        return (
            <Formik {...formikProps} >
                {props =>
                    (<form className="fform" onSubmit={props.handleSubmit}>
                        {/*/.....*/}
                        <button type="submit" disabled={props.isSubmitting}>Submit Form</button>
                    </form>)}
            </Formik>
        );
    }
};

Вот компонент, в котором используется класс вместо хуков https://codesandbox.io/s/cool-dew-ey8o9. Все, кроме вызова данных, работает само по себе (ошибка 405). Вызов данных получает все элементы из формы, которая является важной частью.

...