0
105
VistasTabla de representación solo si tiene datos
Tengo mesa en una forma. después de que el usuario envía los datos del formulario, se muestran en la tabla de resultados. el problema es que el encabezado de la tabla se muestra incluso antes de que el usuario envíe el formulario y lleguen los datos.
así que creé una variable.
const [flag, setFlag] = useState(false)Establecí el indicador como verdadero después de la llamada a la API.
const { data } = await axios.get('http://localhost:3000/api/certificates', { params: param, }); setFlag(true); //Here changing the variable value to true. setResponse(data); }y en el div del componente de la tabla estamos poniendo esta bandera
<div id="flag"> También probé en el componente de table .
<table className="table table-striped table-bordered " id="flag>pero ninguno de ellos trabajando. ¿Podría sugerir lo mismo?
Mi requisito es que la tabla se represente solo si se llama a la API y tiene datos.
3 Respuestas
Responde la pregunta0
let data = []; axios.get('http://localhost:3000/api/certificates', { params: param, }).then(response=>{ data=response.data; setFlag(true); //Here changing the variable value to true. setResponse(data); }).catch(err => {})0
Debería ser así en la sección de devolución.
Comprobación de bandera: -
return <div> {flag && <table> <tr> <th>name</th> <th>class</th> </tr> <table> } </div>verificación de datos: -
return <div> {(response?.length > 0) && <table> <tr> <th>name</th> <th>class</th> </tr> <table> } </div>estamos usando && (Operador AND) para verificar si el indicador es verdadero y luego muestra la tabla; de lo contrario, no.
0
const { data } = await axios.get('http://localhost:3000/api/certificates', { params: param, }); //add condition to check the length of data if(data.length> 0){ setFlag(true); //Here changing the variable value to true. setResponse(data); } else { setFlag(false); setResponse(data); } }en JSX use la bandera como se muestra a continuación
{flag?<table className="table table-striped table-bordered " id="flag">:null}