Блог

Я пытаюсь реализовать форму в Relay, при нажатии на кнопку отправки текст заменяется значком загрузки.

Обрабатывать функцию отправки:

 const handleSubmitNewDetails = (e) => {
  e.preventDefault();
  setIsDetailsInFlight(true); // Show loading icon
  commitUpdateDetails(
    {
      name: name,
      email: email,
      dob: dob,
  },
  () => { setIsDetailsInFlight(false) }, // on completed
  () => { setIsDetailsInFlight(false) }, // on error
);
 

};

Предполагается, что моя функция handleSubmit устанавливает состояние состояния мутации «в полете» в true. Это вызывает повторный рендеринг, когда commitUpdateDetails отсутствует, успешно отображая значок загрузки. Когда присутствует commitupdateDetails, это не работает.

Работает commitUpdateDetails, и я добавил искусственную задержку во времени отклика для проверки значка загрузки, поэтому задержка не является проблемой.

Я предполагаю, что relay или react не завершают настройку состояния, разрешающего повторный запуск, если функция дескриптора не завершена, даже при ожидании асинхронных функций? Если да, то есть ли способ обойти это …?

Обновить:

Отсутствие использования перехватов setState в обратных вызовах приводит к появлению значка загрузки, поэтому я предполагаю, что react / relay управляет этим, не уверен, как найти решение.

Обновление 2:

Установка простого обработчика с использованием setTimeout вместо commitMutation работает отлично, поэтому я не понимаю, почему рендеринг не происходит во время ожидания завершения мутации.

Перенос фиксации (вызываемой в commitUpdateDetails) в обещание работает. Я не знаю, почему это не работает раньше. Объяснение было бы отличным 🙂