React 给了我两倍的 API 结果

Question

my app in rect that consumes an api, works correctly but it doubles the result. That is, it gives me the correct result but 2 times in a row. Are my first steps in REACT

This is my REACT component:

import React, { useEffect, useState, Fragment } from 'react';
// Importar cliente Axios
import clienteAxios from '../../config/axios';


function Clientes () {
    // Trabajar con el State
    // clientes = State
    // guardarClientes = Funcion para guardar el State
    const [clientes, guardarClientes] = useState({});


    //Query a la API
    const consultarAPI = async() => {
        // console.log('Consultando...');
        const clientesConsulta = await clienteAxios.get('/clientes');
        // console.log(clientesConsulta.data.clientes);

        // Colocar el resultado en el State
        guardarClientes(clientesConsulta.data.clientes);
    }

    //  Use effect es similar a componentdidmount y willmount
    useEffect( () => {
        consultarAPI();
    }, [] );


    function createArray(clientes) {
        if (clientes && clientes.length > 0) {
          return clientes.forEach(cliente => console.log(cliente)
          );
        }
        return [];
      }




    return (
        <Fragment>
            <h2>Clientes</h2>
            {/* {console.log(clientes)} */}
            {/* {console.log(guardarClientes)} */}

            <ul className="listado-clientes">
                {createArray(clientes)}
            </ul>
        </Fragment>
    )
}

export default Clientes;

The code works very well but in the terminal it gives me 2 times the same. Thank you very much in advance

Answer 1

Try to move the api call function inside the useEffect hook, like this:

 import React, { useEffect, useState, Fragment } from 'react'; // Importar cliente Axios import clienteAxios from '../../config/axios'; function Clientes () { // Trabajar con el State // clientes = State // guardarClientes = Funcion para guardar el State const [clientes, guardarClientes] = useState({}); // Use effect es similar a componentdidmount y willmount useEffect( () => { //Query a la API const consultarAPI = async () => { const clientesConsulta = await clienteAxios.get('/clientes'); // Colocar el resultado en el State guardarClientes(clientesConsulta.data.clientes); } consultarAPI(); }, [] ); function createArray(clientes) { if (clientes && clientes.length > 0) { return clientes.forEach(cliente => console.log(cliente) ); } return null; // <-- Change to return null if no clients are present. } return ( <Fragment> <h2>Clientes</h2> <ul className="listado-clientes"> {createArray(clientes)} </ul> </Fragment> ) } export default Clientes;