onclick运行功能反应不起作用reactjs

Question

我有以下问题，我有一个功能，但几秒钟或几分钟后，它无需单击即可独立运行。 如果有人可以帮助我解决我的问题，当我单击该功能时，它会正常运行，但会在几秒钟或几分钟后自动执行 谢谢 我在那里留下代码

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

import clienteAxios from '../../config/axios';
import { withRouter } from 'react-router-dom';
import { CRMContext } from '../../context/CRMContext';


const ListadoPedidos =(props) => {
    const [ auth, setAuth ] = useContext(CRMContext);

    const [pedidos, setPedidos] = useState([]);


    const detallePedido = id => {

            props.history.push(`/detalle-pedido/${id}`);

    }

    const eliminarPedido = () => {

    }
    
    useEffect( () => {
        if(auth.token !== '') {
            //query a la API
            const consultarAPI = async () => {
                try {
                    const pedidosConsulta = await clienteAxios.get(`/pedidoscliente/${auth.clienteId}`);

                setPedidos(pedidosConsulta.data);
                } catch (error) {
                    if(error.response.status === 500) {
                        props.history.push('/iniciar-sesion');
                    }
                }
            }
            consultarAPI();
        } else {
            props.history.push('/iniciar-sesion');
        }
        
    }, [] );
return(
        <Fragment>
            <div  class="row justify-content-end">
                    <button type="button" 
                    class="btn btn-dark mr-2"
                    onClick={() => detallePedido(pedido.id)}
                    >
                    Ver detalle</button>
            </div>
        </Fragment>
    )
}
export default withRouter(ListadoPedidos);