0

Olá, estou tendo um erro em React.Js que não compreendo na tentativa de consumir dados de uma API que eu mesmo criei. criei um loop para que eu conseguisse pegar as informações do json e printasse me meu site.

Abaixo o código seguido do erro:

import React, {useState, useEffect} from 'react';


const Produtos = () => {
    const [produtos, setProdutos] = useState([]);

    useEffect(async() => {
        const result = await fetch("http://localhost:8080/React3/fse/src/php/produtosapi.php");
        setProdutos(await result.json());
        
    }, [])

    return (
        <>
            <div className="container-fluid">
                <div className="row">
                    {   
                        produtos.map(value => {
                            return (
                                
                                <div className="col-lg-3">
                                    <div key={value.id}>
                                        <img src= {value.imagem} alt="a" width="120" height="120" />
                                        <h5>{value.descricao}</h5>
                                        <h5>R$:{value.preco}</h5>
                                        <br /> 
                                    </div>
                                </div>
                            )
                        })     
                    }
                </div>
            </div>
        </>
    )
}

export default Produtos;

erro: "effect callbacks are synchronous to prevent race conditions. put the async function inside:"

1 Resposta 1

2

Fale cara, então, você não pode está usando o async dentro do useEffect você deve chamar uma função para executar dentro dele e em seguida chama-la, fiz um exemplo de como pode está resolvendo seu problema:

import React, {useState, useEffect} from 'react';


const Produtos = () => {
    const [produtos, setProdutos] = useState([]);

  useEffect(() => {
    async function getProducts(){
      await fetch("http://localhost:8080/React3/fse/src/php/produtosapi.php")
        .then((response) => {
          return response.json();
        })
        .then((data) => {
          setProdutos([data]);
        });
    }
        
     getProducts();
        
    }, [produtos]);

    return (
        <>
            <div className="container-fluid">
                <div className="row">
                    {   
                        produtos.map(value => {
                            return (
                                
                                <div className="col-lg-3">
                                    <div key={value.id}>
                                        <img src= {value.imagem} alt="a" width="120" height="120" />
                                        <h5>{value.descricao}</h5>
                                        <h5>R$:{value.preco}</h5>
                                        <br /> 
                                    </div>
                                </div>
                            )
                        })     
                    }
                </div>
            </div>
        </>
    )
}

export default Produtos;

5
  • Por que você colocou produtos como dependência do useEffect? E por que está usando .then com async e await? 10/12/2020 às 11:43
  • Achei que ficaria melhor o exemplo, você pode está combinando os dois sem problemas, toda função assíncrona retorna promises. Em relação aos produtos, quando colocado como dependência, o component é renderizado toda vez que tiver uma atualização no state de produtos. @RafaelTavares 10/12/2020 às 12:29
  • Se você atualiza o estado dentro do useEffect, e o estado é uma dependência, estará fazendo um loop infinito. Além disso, você nem precisa de async e await usando o then do modo como está no código 10/12/2020 às 13:02
  • Beleza cara, mas fiz o teste não deu loop infinito, tenta também, em relacão ao then eu sei que não precisa, mas como disse achei que ficaria melhor pra exemplificar, só isso. abraços @RafaelTavares 10/12/2020 às 14:39
  • Está certo, não entrará num loop infinito se a API retornar o mesmo valor, mas estará fazendo um request a mais. 10/12/2020 às 14:47

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .