Axios response não está sendo renderizada no React Native

Desenvolvimento de Aplicativos
#1

Eu escrevi uma requisição axios em React Native useEffect. A requisição dá sucesso no backend e retorna a resposta correta no terminal, mas o useEffect não está funcionando direito. Ainda está retornando o produto como undefined e não tá alterando o estado . Se tudo funcionar bem, o produto conteria a variável do produto. Só funciona quando eu salvo novamente e depois mostra o produto. Tem algo de errado com o código?

const [product, setProduct] = useState(); 

useEffect(  () => {

      getproductinfo()

     if (props.editMode) {
        AsyncStorage.getItem("jwt")
          .then((res) => {
            setToken(res);
          })
          .catch((error) => console.log(error));
  
      }
   console.log(product, "Esse é o produto");     
    },
    [],
  
)

Essa é a função:

  const getproductinfo = async () => { 
    await axios
     .get(`${baseURL}products/get/product/${props.product}`)
     .then((res)=> {setProduct(res.data) 
       
     })
     .catch((error)=> { 
       console.log(error);
     }); 
   }
#2

getproductinfo é uma função assíncrona e você não usa await no hook useEffect para que o código continue a ser executado enquanto a requisição axios ainda não estiver resolvida. No entanto, você não pode usar uma função assíncrona como useEffect, então sugiro a seguinte abordagem:

useEffect(  () => {
    const asyncFunction = async() {
        await getproductinfo();
        console.log(product, "Esse é o produto"); 
    }
    asyncFunction();
    // Resto do código...
    },
    [],
  
)
1 curtida