0

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>
    )
  }
}
2

1 Resposta 1

0

Vejo duas possibilidades:

  1. Criar uma cópia do estado users, remover o registro excluído e atualizar o estado com o novo objeto;
  2. Fazer uma nova requisição toda vez que um registro for excluído, trazendo a listagem atualizada.

A primeira abordagem é menos custosa, e ao meu ver é a melhor por ter a mesma eficácia.

Não vejo sentido em utilizar setInterval na sua função updateTable. Dessa forma faz mais sentido para mim:

async updateTable() {
    const response = await Axios.get('http://localhost:8080/getclients')  
    this.setState({users: response.data})
}

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .