Асинхронный useState

@riddlejs · Регистрация: 20.02.2018

Author24 — интернет-сервис помощи студентам

Здравствуйте!!!
У меня вопрос в связи с тем что useState асинхронный.

Например я хочу задизаблить кнопку дождаться выполнения запросов и раздизеблить кнопку сделав редирект.
Хочу узнать можно ли как в коде делать или лучше по-другому т к нет гарантии установки стейта?

Javascript

const [isDisabled, setIsDisabled] = useState(false);
 
const fn = () => {
setIsDisabled(true);
try{
await sameReq1();
await sameReq2();
setIsDisabled(false); // Есть ли гарантия установки стейта для условия ниже?
 
!isDisabled ? redirect() : null;
}catch(e){
setIsDisabled(false)
}
 
}

krvsa · 30.06.2022, 11:27

Сообщение от riddlejs

Javascript

1 2	setIsDisabled(false); // Есть ли гарантия установки стейта для условия ниже? !isDisabled ? redirect() : null;

После "старта" setIsDisabled(false) стейт сразу не поменяется...
Т.е. это

Javascript

1	!isDisabled ? redirect() : null;

Не сработает

@riddlejs · 30.06.2022, 11:31 **[ТС]**

И что получается делать? какие варианты?

@mr_dramm · 30.06.2022, 12:30

Сообщение от riddlejs

какие варианты?

Отслеживать стейт через useEffect

@riddlejs · 30.06.2022, 13:38 **[ТС]**

Т е так? юзэффект он запустит setIsDisabled(false); как только изменится isRequest и тогда условие в тернарнике точно сработает?

Javascript

const [isDisabled, setIsDisabled] = useState(false);
const [isRequest, setIsRequest] = useState(false);
 
useEffect(() => {
    if(isRequest){
        setIsDisabled(true);
    }else{
        setIsDisabled(false);
    }
 
}, [isRequest]);
 
const fn = () => {
setIsRequest(true);
try{
await sameReq1();
await sameReq2();
setIsRequest(false); // Есть ли гарантия установки стейта для условия ниже?
 
!isDisabled ? redirect() : null;
}catch(e){
setIsDisabled(false)
}
 
}

krvsa · 30.06.2022, 14:17

Сообщение от riddlejs

Т е так?

Вариантов можно придумать несколько...
Например отслеживать isDisabled
- true можно запускать sameReq1() и sameReq2()...
- false делать redirect()

@mr_dramm · 30.06.2022, 14:21

Для начала объясните Ваш алгоритм, судя по этому нужно сделать ожидания выполнения запроса

Javascript

useEffect(() => {
    if(isRequest){
        setIsDisabled(true);
    }else{
        setIsDisabled(false);
    }
 
}, [isRequest]);

Но вот тут не совсем понятно

Javascript

const fn = () => {
    setIsRequest(true);
    try {
        await sameReq1();
        await sameReq2();
        setIsRequest(false); // Есть ли гарантия установки стейта для условия ниже?
 
        !isDisabled ? redirect() : null;
    } catch (e) {
        setIsDisabled(false)
    }
 
}

setIsRequest(false) должно сделать isDisabled false и далее будет redirect

зачем если нет ни return ни присваивания

Javascript

1	!isDisabled ? redirect() : null;

Пока у меня сложилось впечатление что вы хотите сделать это

Javascript

import "./styles.css";
import React from "react";
const sameReq = () =>
  new Promise((resolve) => {
    setTimeout(() => resolve({ value: true }), 1000);
  });
 
export default function App() {
  const [isDisabled, setDisabled] = React.useState(false);
  const redirect = () => {};
  const onClick = async () => {
    setDisabled(true);
    await sameReq();
    setDisabled(false);
    redirect();
  };
  return (
    <div className="App">
      <button onClick={onClick} disabled={isDisabled}>
        Click
      </button>
    </div>
  );
}

Добавлено через 2 минуты
Да еще Вы забыли свою функцию сделать асинхронной, аwait в ней в лучшем случае не сработает

@riddlejs · 30.06.2022, 14:34 **[ТС]**

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

@mr_dramm · 30.06.2022, 14:36

добавил try catch

Javascript

import "./styles.css";
import React from "react";
const sameReq = () =>
  new Promise((resolve) => {
    setTimeout(() => resolve({ value: true }), 1000);
  });
 
export default function App() {
  const [isDisabled, setDisabled] = React.useState(false);
  const redirect = () => {};
  const onClick = async () => {
    setDisabled(true);
    try{
      await sameReq();
    }
    catch(err){
      console.log(err.message)
    }
    setDisabled(false);
    redirect();
  };
  return (
    <div className="App">
      <button onClick={onClick} disabled={isDisabled}>
        Click
      </button>
    </div>
  );
}

@LTMRV · 29.08.2022, 20:44

Можно с помощью реф

Javascript

export default function App() {
  const isLoadingRef = useRef(false)
 
  const onClick = async () => {
    if (!isLoadingRef.current) {
      isLoadingRef.current = true
      
      try {
        await sameReq()
        redirect()
      } catch (e) {
        console.log(e.message)
      } finally {
        isLoadingRef.current = false
      }
    }
  }
 
  return (
    <div className="App">
      <button onClick={onClick}>Click</button>
    </div>
  )
}

Но для лучшего UX, на кнопке желательно показать лоадер, потому без стейта тут врядли можно обойтись

@riddlejs 3 / 3 / 1 Регистрация: 20.02.2018 Сообщений: 126
	30.06.2022, 11:31 [ТС]	3
	И что получается делать? какие варианты? 0

@mr_dramm молодой 1641 / 905 / 291 Регистрация: 17.07.2021 Сообщений: 1,850 Записей в блоге: 12
	30.06.2022, 12:30	4
	Сообщение от riddlejs какие варианты? Отслеживать стейт через useEffect 1

krvsa 2984 / 1157 / 315 Регистрация: 14.03.2022 Сообщений: 2,822
	30.06.2022, 14:17	6
	Сообщение от riddlejs Т е так? Вариантов можно придумать несколько... Например отслеживать `isDisabled` - `true` можно запускать `sameReq1()` и `sameReq2()`... - `false` делать `redirect()` 1

@riddlejs 3 / 3 / 1 Регистрация: 20.02.2018 Сообщений: 126
	30.06.2022, 14:34 [ТС]	8
	Похоже я перегрелся и действительно зачем я к этому дизаблу и тернарнику прицепился. Логика у меня такая я дизаблю кнопку пока идут запросы и если они успешны редирекчу, а если ошибка я снимаю дизабл и человек заново жмет кнопку. 0

Асинхронный useState

Решение