Повторное использование компонента AuthForm без отправки ненужной информации в состоянии - PullRequest
Новая
       24

Повторное использование компонента AuthForm без отправки ненужной информации в состоянии

0 голосов
/ 11 июля 2019

У меня есть компонент AuthForm, который я использую на обеих страницах / signup и / login, и я различаю их с помощью свойства formType. Страница регистрации нуждается в нескольких дополнительных полях, включая пол и дату рождения (возможно, адрес в будущем), тогда как форма входа может быть довольно простой.

С точки зрения отображения это просто, так как я могу показать или скрыть эти дополнительные поля в зависимости от значения свойства formType. Где это усложняется, с государством.

Я рассмотрел два различных метода управления состоянием: 1) с хуком useFormInput () и 2) с хуком useState в сочетании с объектом состояния (имитируя методологию компонента с состоянием).

Вариант 1: 

const useFormInput = (initialValue) => {
  const [value, setValue] = useState(initialValue);

  function handleChange(e) {
    setValue(e.target.value);
  }

  return {
    value,
    onChange: handleChange
  };
}

const AuthForm = ({ buttonText, formType, onAuth }) => {

  const email = useFormInput(''); 
  const password = useFormInput(''); 
  ...

  const handleSubmit = (e) => {
    e.preventDefault();
    onAuth(formType, {email, password, etc); 

  return (
    <form onSubmit={handleSubmit}>
      <label htmlFor="email">E-mail</label>
      <input
        id="email"
        name="email"
        type="text"
        {...email}
      />
   ...
  )
};
  }

Вариант 2 

const AuthForm = ({ buttonText, formType, onAuth }) => {

  const [state , setState] = useState({
      email : "",
      password : "",
      firstName: "",
      lastName: "",
      gender: "",
      dob: ""
  })

  const handleChange = e => {
      const {name , value} = e.target;
      setState( prevState => ({
          ...prevState,
          [name] : value
      }))
  }

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log(state);
    onAuth(formType, state);

  return (
    <form onSubmit={handleSubmit}>
      <label htmlFor="email">E-mail</label>
      <input
        id="email"
        name="email"
        onChange={handleChange}
        type="text"
        value={state.email}
      />
   ...
  )
};
  }

Какой бы метод я ни использовал, я не могу избежать объявления каждой переменной состояния. Когда я устанавливаю состояние = {} в варианте 2, я получаю ошибку об изменении неконтролируемых компонентов на контролируемые компоненты. Когда я объявляю все свои переменные состояния, это означает, что моя форма входа будет иметь пол = "" в состоянии, что затем перезапишет значение в моей базе данных.

Как я могу либо A) избежать полного объявления переменных состояния, либо B) сделать так, чтобы мое окончательное состояние содержало только поля, соответствующие контексту, в котором используется AuthForm?

1 Ответ

0 голосов
/ 11 июля 2019

Вы можете попытаться создать начальное состояние на основе formType (вариант 2). 

const AuthForm = ({ buttonText, formType, onAuth }) => {

  initialStateLogin = {
      email : "",
      password : "",
  };

  initialStateSignup = {
      email : "",
      password : "",
      firstName: "",
      lastName: "",
      gender: "",
      dob: ""
  };

  const [state , setState] = useState(formType === 'login' ? initialStateLogin : initialStateSignup);

  //rest of the code..

}
...