Olá, gostaria de saber como atualizar a tabela automaticamente depois de deletar algum registro, porém, toda vez que deleto um registro, tenho que atualizar novamente a página, e por isso utilizei a função setInterval(). Aqui vai uma amostra do código...
Componente App:
export default class App extends Component {
constructor(props) {
super(props)
this.state = {
users: []
}
this.updateTable = this.updateTable.bind(this)
this.deleteClient = this.deleteClient.bind(this)
}
componentDidMount() {
this.updateTable()
}
updateTable() {
setInterval(async () => {
const response = await Axios.get('http://localhost:8080/getclients')
this.setState({users: response.data})
}, 1000)
}
Função para deletar registro.
deleteClient(id) {
Axios.post('http://localhost:8080/delete', {
id: id
})
}
render() {
return (
<Table users={this.state.users} handleClick={this.deleteClient}/>
);
}
}
Componente Table:
export default class Table extends Component {
render() {
return (
<table>
<thead>
<tr>
<th>#</th>
<th>Nome</th>
</tr>
</thead>
<tbody>
{this.props.users.map(user => {
return <tr key={user.id}>
<td>{user.id}</td>
<td>{user.nome}</td>
<td><button onClick={() =>
Minha pergunta é sobre depois de clicar neste button, atualizar a tabela automaticamente.
this.props.handleClick(user.id)}>Deletar</button></td>
</tr>
})}
</tbody>
</table>
)
}
}