Estoy tratando de obtener datos de la base de datos de forma asíncrona cada vez que se actualiza un nuevo campo, pero incluso después de agregar la palabra clave asíncrona y espera necesaria, la tabla se actualiza solo en la carga de la página.

Tengo un formulario para enviar datos a la base de datos y quiero que la tabla se actualice tan pronto como suceda.

Código para actualizar la tabla

 const entryList = [] const [tableEntries, setTableEntries] = React.useState(entryList) useEffect(() => { async function fetchMyAPI() { await Axios.get('http://localhost:8080/api/connections') .then(res => { const newList = entryList.concat(res.data); Array.prototype.forEach.call(newList, response => { setTableEntries(prevTableEntries => [...prevTableEntries,response]); }); }) .catch(err => console.log(err)); } fetchMyAPI() }, []);

Código para mostrar datos dentro de la tabla.

 { tableEntries.map((item) => ( <> <tr> <th scope="row">1</th> <td>{item.id}</td> <td>{item.name}</td> <td>{item.connectionType}</td> <td> <CDropdown className="m-1" size="lg"> <CDropdownToggle color="secondary"> Select Option </CDropdownToggle> <CDropdownMenu> <CDropdownItem>Delete</CDropdownItem> <CDropdownItem>Reauthorize</CDropdownItem> </CDropdownMenu> </CDropdown> </td> </tr> </> ))}

Código para el envío del formulario (incluido esto en caso de que fuera necesario que lo entendieran)

 async handleSubmit(event) { event.preventDefault(); // stop browser from submitting form const form = await event.target; // get form element const article = { "connectionType": "InstagramConnection", "name": this.state.value, "accessCredentials": { "id": 2, "token": this.state.access_token } }; await Axios.post('http://localhost:8080/api/connections', article) .then(response => console.log(response.data)) .catch(error => { console.log('There was an error!', error); }) }

(EDITAR: se agregaron las variables que estoy usando para actualizar la tabla al código para una referencia más fácil)