Реагировать на useEffect и useRef

так что я получил эту функцию useEffect:

useEffect(
    () => {
      getDoH().then((response) => {
        initialResponse.current = response.data;
        console.log(response.data)
      }, (error) => {
        console.log(error);
      }); 
      console.log(initialResponse.current)
    }, []);

GetDoH - это функция axios.get, а начальный ответ:

const initialResponse = useRef();

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

но мой

console.log(initialResponse.current)

продолжает возвращаться как Undfeined, другими словами, я не могу сохранить в нем свое значение ответа. есть идеи, почему и как это исправить?


reactjs react-hooks axios use-effect use-ref
person Mr.Gomer    schedule 11.06.2021    source источник
comment
Он не появится, потому что .then запускается после запуска console.log, потому что это обещание. Почему вы не храните его в штате?   -  person Konstantin    schedule 11.06.2021
comment
Я уверен, что если вы посмотрите на свой log заказ, ваш третий журнал будет распечатан раньше первого.   -  person Konstantin    schedule 11.06.2021

Ответы (2)


arrow_upward
1
arrow_downward

Похоже, что ваша формулировка проблемы не находится внутри вашего .then() блока, а это означает, что вы не можете быть уверены, что блок .then() к тому времени еще был запущен. Сетевые вызовы асинхронны, поэтому Javascript оплачивает выполнение, а не ожидание. Если вы хотите увидеть, что это за значение после возврата вызова , вы должны поместить свой оператор console.log(initialResponse.current) в блок .then().

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

person samuei    schedule 11.06.2021

arrow_upward
0
arrow_downward

Перед тем как:

    useEffect(
        () => {
          if(initialResponse && initialResponse.current){
           getDoH().then((response) => {
            initialResponse.current = response.data;
            console.log(response.data)
           }, (error) => {
            console.log(error);
           }); 
           console.log(initialResponse.current)
          }
        }, [initialResponse, getDoH]);

И добавьте initialResponse как опору хука useEffect.

Если вы не можете объявить getDoH внутри useEffect, добавьте его как опору - это хорошая практика.

person Martin Gainza Koulaksezian    schedule 11.06.2021
comment
Это не устранило ИСС. - person Mr.Gomer; 11.06.2021
comment
Как initialResponse.current будет выполняться на первом рендере? Если это именно та переменная, которую хочет выполнить пользователь? Более того, размещение ссылок в массиве dep не работает, этого делать не должно. - person Konstantin; 11.06.2021
comment
пожалуйста, добавьте код (или аналогичный) в свой код, и я могу вам больше помочь. @ Мистер Гомер - person Martin Gainza Koulaksezian; 11.06.2021