Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

React - Tabelas

por Denis Ivan Correia
| 55.6k xp | 92 posts
Programador Front-end

Bom dia,

Estou conseguindo salvar e listar sem problemas, porem eu queria fazer para quando gravar um novo registro no banco pela API, ele salvar no banco como esperado e salvar na minha tabela que esta na tela.

Pois toda vez que eu salvo eu preciso executar o método listar, isso pode deixar lento se tiver por exemplo mil registros.

State:

this.state = {
   banco: {},
   listbanco: []

}

Estou pegando os dados pelo onChange:

 <div className="col-lg-12">
                    <label>ID</label>
                    <div className="col-lg-12">
                      <input onChange={(e) => { this.updateBanco('id', e.target.value) }} name="id"></input>
                    </div>
                  </div>

                  <div className="col-lg-12">
                    <label>CODIGO 001</label>
                    <div className="col-lg-12">
                      <input onChange={(e) => { this.updateBanco('codigo', e.target.value) }} name="codigo"></input>
                    </div>
                  </div>

                  <div className="col-lg-12">
                    <label>NOME </label>
                    <div className="col-lg-12">
                      <input onChange={(e) => { this.updateBanco('nome', e.target.value) }} name="nome"></input>
                    </div>
                  </div>

                  <div className="col-lg-12">
                    <label>AGENCIA 0101 </label>
                    <div className="col-lg-12">
                      <input onChange={(e) => { this.updateBanco('agencia', e.target.value) }} name="agencia"></input>
                    </div>
                  </div>

Que passa por esse método genérico para salvar no Objeto: banco {}

  updateBanco = (prop, value) => {
    let b = this.state.banco;
    b[prop] = value;
    this.setState({ banco: b });
  }

No método Gravar ele passa o Objeto usuário que é declarado na própria função, e pega do state o objeto Banco{} Gravar:

  gravarPost = () => {
    var usuario = {}
    usuario.id = 100;
    usuario.senha = "2494";

    axios({
      method: 'post',
      url: 'https://www.url.com.br/118/rest/banco/set',
      data: [usuario, this.state.banco]
    }).then(result => {
      console.log(result)
    })
  }

No listar eu passo apenas o usuario. Listar:

 listarPost = () => {
    var usuario = {}
    usuario.id = 100;
    usuario.senha = "2494";

    axios({
      method: 'post',
      url: 'https://www.url.com.br/118/rest/banco/list?',
      data: [usuario]
    }).then(result => {
      this.setState(result.data);
      console.log(result.data)
    })
  }

Minha tabela Estou usando a react-table: que passo apenas o data e ele monta os dados nas colunas que determinei.

https://react-table.js.org/#/story/readme

    </div>
          <ReactTable
            data={this.state.listbanco}
            columns={columns}
          />
        </div>
3 respostas
por Gabriel Leite
| 3485k xp | 5398 posts
Instrutor

Boa noite, Denis! Como vai?

Se vc quer atualizar a sua listagem de bancos na tela ao término da operação de salvar, basta vc atualizar o state quando a promise for resolvida.

Exemplo Prático:

gravarPost = () => {
    var usuario = {};
    usuario.id = 100;
    usuario.senha = "2494";

    axios({
      method: 'post',
      url: 'https://www.url.com.br/118/rest/banco/set',
      data: [usuario, this.state.banco]
    }).then(result => {
      console.log(result);

      // atualização do state
      this.setState({
            listbanco: [this.state.banco, ...this.state.listbanco]
      });
    })
}

O ... que aparece antes do this.state.listbanco é o spread operator que permite expandir o array representado por this.state.listbanco. Ou seja, o novo valor de this.state.listbanco será um array com o novo banco na primeira posição e todos os bancos antigos nas demais posições.

Para saber mais sobre spread operator

https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Operators/Spread_operator

Qualquer coisa é só falar!

Grande abraço e bons estudos!

por Denis Ivan Correia
| 55.6k xp | 92 posts
Programador Front-end

Muito obrigado pela explicação, Mas agora como poderia fazer para quando deletar ele excluir da lista ?

Hoje eu deleto do servidor e executo o método listar, teria como implementar a mesma logica no método deletar ?


  deletarPost = () => {
    this.listarPost();
    var usuario = {}
    usuario.id = 100;
    usuario.senha = "2494";

    axios({
      method: 'post',
      url: 'https://www.url.com.br/118/rest/banco/del',
      data: [usuario, this.state.banco]
    }).then(function (response) {
      console.log(response);
    })
  }

Pois pelo que entendi o Spread iria adicionar um novo objeto dentro do array, mas no caso deletar eu iria retirar ele.

Acredito que a duvida do deletar também se aplica ao alterar, como vou especificar qual objeto do array eu quero alterar ?

solução!
por Gabriel Leite
| 3485k xp | 5398 posts
Instrutor

Denis, nesse caso, considerando que a listagem está na ordem dos itens do seu array, vc deverá passar para a função deletarPost() o índice do elemento selecionado na tabela! Então ficaria algo assim:

deletarPost = ( indiceParaDeletar ) => {
    this.listarPost();
    var usuario = {};
    usuario.id = 100;
    usuario.senha = "2494";

    axios({
      method: 'post',
      url: 'https://www.url.com.br/118/rest/banco/del',
      data: [usuario, this.state.banco]
    }).then(function (response) {
      console.log(response);

      let novoListBanco = [...this.state.listbanco];
      novoListBanco.splice( indiceParaDeletar, 1 );

      // atualização do state
      this.setState({
            listbanco: novoListBanco
      });
    });
}

Para saber mais sobre o método splice()

https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Array/splice

https://www.w3schools.com/jsref/jsref_splice.asp

Grande abraço e bons estudos!