Реактивная проверка маршрутизатора и PropType переменных, которые не были инициализированы

Question

Допустим, у меня есть неинициализированная переменная

const [email, setEmail] = useState();

У меня есть два маршрута. Одна - это страница регистрации, которая будет заполнять электронное письмо, а другая - страница, на которой написано «Спасибо за регистрацию, пожалуйста, проверьте {props.email»

<Switch>
  <Route path=...>
    <SignupForm onSubmit={(email)=>setEmail(email)} />
  </Route
  <Route path=...>
    <RegisterComplete email={email} />
  </Route
</Switch>

Теперь проблема в том, что RegisterComplete для свойства prop электронной почты установлено значение обязательное, поскольку вы не хотите отображать эту страницу, если не передано электронное письмо.

Однако, поскольку все маршруты сразу передаются в коммутатор как дочерние элементы, типы пропуска будут выброшены предупреждение о том, что вы пропустили электронную почту.

Я не хочу удалять isRequired из проптипов, и я считаю, что использование значения по умолчанию - это просто взлом, который наносит ущерб цели проптипов, например const [email, setEmail] = useState("");

Как лучше всего разрешить это предупреждение о типах?

Answer 1

Решение, в котором я остановился, заключается в следующем:

Если нет проверок на месте, пользователь может получить доступ к RegisterComplete. Если бы мы жили в старом мире шаблонов, бэкэнд-API отправил бы пользователя на страницу регистрации. Мы должны следовать этому шаблону и во внешнем интерфейсе.

Мы разрешаем электронной почте быть пустую строку.

const [email, setEmail] = useState('');

Далее мы проверяем пустую строку в RegisterComplete и перенаправляем.

export default function RegisterComplete(props) {
    if (!props.email) {
        props.redirectToRegistration();
    }
};

И затем на главном маршрутизаторе мы передаем эту вызываемую переадресацию.

<Switch>
  ...
  <Route path=...>
    <RegisterComplete email={email}
                      redirectToRegistration={() => history.push('/signup/')}/>
  </Route
</Switch>

Теперь мы пропускаем проверку свойств, и пользователь правильно удаляется со страницы, так как он не должен быть включен. Выиграй!

Философски составные прототипы имеют смысл. адрес электронной почты требуется, но не должен заполняться, потому что требуется redirectToRegistration и обрабатывает этот случай.

Answer 2

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

1. Инициализировать опору и, если необходимо, иметь дело с инициализированным значением внутри компонента
2. Не отображать маршрут / компонент, пока ваша опора не определена

PropTypes - помощники разработчика, они не контролируют бизнес-процессы.