Soy un nuevo principiante en JS. Esencialmente, la esencia del problema es esta:
Tengo una base de datos MySQL desde donde estoy cargando los datos de mi tabla a través de Axios
Hay operaciones CRUD en mi aplicación web, que actualiza mi base de datos cada vez que se realiza una solicitud
Todas las funciones funcionan y los cambios se reflejan en el backend, pero no en Datagrid a menos que haga una recarga de ventana dura
Quiero tener un botón de actualización, que cuando se hace clic obtiene los nuevos datos de mi base de datos sin necesidad de recargar
Sé que podría ser posible a través de una combinación de variables setState y useEffect, pero todos mis intentos durante el fin de semana han fallado hasta ahora. ¿Alguna idea de cómo integrarlos juntos?
datos.js
import axios from "axios"; export const getData = async () => { let response = await axios.get('http://localhost:8080/h2h-backend/list'); console.log(response.data); return response.data; }Cuadrícula de datos
import { getData } from '../services/data'; export default function DataTable() { const [pageSize, setPageSize] = React.useState(10); const [data, setData] = React.useState([]); useEffect(async () => { setData(await getData()); }, []) let rows = searchInput ? data.filter((item) => item.cust_number.toString().match(new RegExp("^" + searchInput, "gi"))) : data; return ( <div style={{ width: '100%' }}> <DataGrid rows={rows} columns={columns} autoHeight={true} density='compact' rowHeight={40} /> )actualizarboton.js
export default function RefreshButton() { return ( <Grid item xs={0.5} backgroundColor="rgba(39,61,74,255)" > <IconButton aria-label="refresh" size="small" sx={iconSx} onClick={() => { window.location.reload(); }} > <RefreshIcon sx={{fontSize: "18px"}}/> </IconButton> </Grid> ); }El problema está en cómo está utilizando el método useEffect en su componente DataTable .
esto es un NO NO
useEffect(async () => { setData(await getData()); }, [])¿Por qué?
Se supone que
useEffectes una función que devuelve nada o una función. ¡Pero una función asíncrona devuelve una Promesa, que no se puede llamar como una función! Simplemente no es lo que espera el gancho useEffect para su primer argumento.
Esto debería funcionar
useEffect(() => { getData() }, [])Con axios tiene la alternativa de hacer una función síncrona sin async/await. Al igual que:
import axios from "axios" export function getData(){ let url = 'http://localhost:8080/h2h-backend/list' let dataFetched = undefined axios.get(url) .then((resp) => dataFetched = resp.data) .catch((error) => console.log(error)) return dataFetched }