Имеет ли этот трюк с перехватом React какие-нибудь плохие последствия? - PullRequest
Новая
       1

Имеет ли этот трюк с перехватом React какие-нибудь плохие последствия?

0 голосов
/ 08 июля 2020

Это близкий к живому пример моего кода. 

const Form = (props) => {
  const { onSubmit } = props;
  const [state, setState] = useState({ text: '' });

  const handleChange = useCallback((e) => {
    const { name, value } = e.currentTarget;

    setState((currentState) => {
      return {
        ...currentState,
        [name]: value,
      };
    });
  }, []);

  const handleSubmit = useCallback(() => {
    setState((currentState) => {
      onSubmit(currentState);
      return currentState;
    });
  }, [onSubmit]);

  return (
    <form onSubmit={handleSubmit}>
      <input value={state.text} name="text" onChange={handleChange} />
      <button type="submit">Submit</button>
    </form>
  );
}

Уловка заключается в функции handleSubmit. Я использую setState, но не собираюсь изменять это состояние. Это просто позволяет мне избежать state как зависимости от useCallback хука. Из-за этого моя функция handleSubmit не воссоздается после каждого изменения состояния. Уже тестировал, работает. В этом случае submit не вызывает рендеринга, но для меня это выглядит очень сложно. Это нормально?

1 Ответ

0 голосов
/ 13 августа 2020

Я хочу добавить, что после некоторых реальных случаев я не рекомендую использовать этот способ. Это может быть причиной проблем, если некоторые из ваших родительских компонентов обновляют свое состояние после обратного вызова onSubmit.

...