React为我提供了两倍的API结果

Question

我的应用程序在rect中消耗一个api，工作正确，但它的结果是双倍的，也就是说，它给我正确的结果，但连续两次。也就是说，它给了我正确的结果，但连续2次。我在REACT中的第一步是

这是我的REACT组件。

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;

代码工作得很好，但在终端机上，它给了我2次相同的。 非常感谢你的支持。

Answer 1

试着把api调用函数移到useEffect钩子里面，像这样。

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;