Ошибка: «Ожидается присваивание или вызов функции, и вместо этого он видит выражение» в компоненте, который реализует регистрацию пользователя. Почему? - PullRequest
Новая
       13

Ошибка: «Ожидается присваивание или вызов функции, и вместо этого он видит выражение» в компоненте, который реализует регистрацию пользователя. Почему?

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

Мне нужно реализовать , зарегистрировать и , авторизовать в моем приложении.

На данный момент я реализовал это:

  • В случае успешной проверки формы пользователем, форма отправляется на локальный сервер (расположенный на моем компьютере) и возвращает ответ, этот ответ содержит токен, который я храню в localStorage

Небольшая часть RegistrationForm. js (до изменений работает нормально): 

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 {
              const res = await api('api/auth/register', {
                  method:'POST',
                  body: JSON.stringify(formValues)
              });
              const token = res.token.token;
              localStorage.setItem('myToken', token);
              console.log('Result!',token);
          } catch(e) {
              console.error(e);   
          } finally {
              setSubmitting(false);
          }   
      },  
    });

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

Но мне все еще нужно сделать это:

  • Когда проверка пользователя в регистрационной форме прошла успешно, и пользователь нажимает кнопку submit, которая должна быть перенаправлена ​​на страницу home
  • Такое же перенаправление должно происходить при авторизации
  • Когда я нажимаю кнопку logout следует перенаправить на login страницу или registration страницу

И я решил реализовать это следующим образом (я комментирую строку, которую я добавляю, и строку, где ошибка): 

const SignupForm = () => {

    const [myToken, setMyToken] = useState(         // add this line
       localStorage.getItem("myToken")              // add this line
    );


    myToken ? <Redirect to="/home" /> : <Redirect to="/" />  // add this line.I have error here

    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 {
              const res = await api('api/auth/register', {
                  method:'POST',
                  body: JSON.stringify(formValues)
              });
              const token = res.token.token;
              localStorage.setItem('myToken', token);
              console.log('Result!',token);
          } catch(e) {
              console.error(e);   
          } finally {
              setSubmitting(false);
          }   
      },  
    });

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

А у меня ошибка :

Expected an assignment or function call and instead saw an expression* 1 042 *

Как написать код для предотвращения такой ошибки?

Также я напишу проект sandbox до изменений:

https://codesandbox.io/s/flamboyant-neumann-hwj1t

В песочнице в папке public/data Я создал файл data.json, потому что я использую локальный сервер на своем компьютере и не могу передать данные с локального сервера в песочницу

Ответы [ 2 ]

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

Я думаю, что вы хотите сделать следующее: 

import { useHistory } from 'react-router-dom';

const SignupForm = () => {
    const [myToken, setMyToken] = useState(localStorage.getItem("myToken"));
    const redirectUrl = myToken ? '/home' : '/'; // Updated this line

    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 {
              const res = await api('api/auth/register', {
                  method:'POST',
                  body: JSON.stringify(formValues)
              });
              const token = res.token.token;
              localStorage.setItem('myToken', token);
              history.push(redirectUrl);  // Redirect to appropriate route path
          } catch(e) {
              console.error(e);   
          } finally {
              setSubmitting(false);
          }   
      },  
    });

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

Выше я установил переменную redirectUrl, которая будет содержать путь для перенаправления в зависимости от доступности токена. Затем позже использовал history.push из хука useHistory для перенаправления на URL из ранее назначенной переменной.

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

Чтобы программно перенаправить с помощью React Router, вам нужно использовать специальную функцию, а не компонент: 

import { useHistory } from "react-router-dom";

const SignupForm = () => {
    const history = useHistory();

    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 {
              const res = await api('api/auth/register', {
                  method:'POST',
                  body: JSON.stringify(formValues)
              });
              const token = res.token.token;
              localStorage.setItem('myToken', token);
              console.log('Result!',token);

              history.push("/home");  //redirect
          } catch(e) {
              console.error(e);   
          } finally {
              setSubmitting(false);
          }   
      },  
    });

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

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

Вот как вы можете реализовать свой "/ home" для перенаправления неавторизованных пользователей. 

const Home = () => {
    const token = localStorage.getItem("myToken")

    return (
        <>
            {!token && <Redirect to="/" />}
            <p>Home page</p>
        </>
    )
}
...