Как обрабатывать асинхронные вызовы от useEffect - PullRequest
Новая
       3

Как обрабатывать асинхронные вызовы от useEffect

1 голос
/ 27 февраля 2020

Я делаю вызов функции из useEffect, функция присутствует в другом классе. Из этой функции я вызываю другую асинхронную функцию c, чтобы сделать вызов ajax после того, как обещание разрешено, я выполняю некоторую операцию с данными, возвращенными вызовом API, а затем возвращаю данные обратно в * 1002. * где функция вызывается в первую очередь. Я получаю неопределенный в useEffect. Вот фрагмент кода 

    // In Main Class
    let newObj=new ABC();
    useEffect(()=>{


    let flag= newObj.method1(url); //method present in another class.
    setFlag(flag)

    });

    // Inside Class ABC

    let flag;

    method1(url){

    this.method2(url).then(function(result) {

        /*some operation */
        flag=true;   //set to true based on data
        console.log(flag)//prints true
       }
      return flag // console log will print false here.
    }

    async method2(url){

      let data=await axios.get(url);
      return data;
    }

Конечный результат, который я пытаюсь получить в основном классе, - это true / false, основанный на вызове API, я хочу, чтобы все логи c присутствовали в классе AB C.

Ответы [ 2 ]

2 голосов
/ 28 февраля 2020

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

 method1{
    return new Promise(function(resolve, reject) {
     this.method2(url).then(function(result) {

    /*some operation */
    flag=true;   //set to true based on data
    console.log(flag)//prints true
   }
  resolve(flag) // console log will print false here.
  });
}

и измените родительскую функцию как 

 let newObj=new ABC();
useEffect(()=>{

 newObj.method1(url).then(flag =>{
     setFlag(flag)
   })    
 });
0 голосов
/ 28 февраля 2020 
useEffect(() => {
    // Instead of using async at useEffect( async () => {})  Create a scoped async function in the hook
    async function asynchronusFunction() {
      await myFunction();
    }
    asynchronousFunction(); // call the above defined function now.
  }, []);

Вы можете создать асинхронный вызов функции c, подобный приведенному выше методу, и использовать await для ожидания выполнения функции. Использование функции asyn c означает, что вы возвращаете обещание. React не ждет обещания: https://github.com/facebook/react/issues/1739

...