Ainda não tem acesso? Estude com a gente! Matricule-se
Ainda não tem acesso? Estude com a gente! Matricule-se

Solucionado (ver solução)

Método clearState

Olá, eu fiz um pouco diferente e quero saber se posso usar dessa maneira que eu fiz.

1- No construtor defini o state com valores vazios:

constructor(props) {
    super(props);
    this.state = {
        nome:'',
        livro:'',
        preco:'',
    }
}

2- Criei um método clearState que tem a função de limpar os campos e setar vazio nas propriedades do state.

clearState = () => {
    this.setState(
        nome:'',
        livro:",
        preco:'',
    );
}

3- Assim, quando eu insiro um componente, eu chamo o método clearState.

handleClick =() => {
    this.props.inserir(this.state);
    this.clearState();
}

O que vocês acham?

Outra coisa, escrevendo esse post, fiquei com uma dúvida, estou enviando o meu this.state no método inserir, isso quer dizer que estou enviando todos os campos definidos no state do construtor, certo ? Mas, e seu eu tiver um state com uma maior quantidade de campos definidos e quiser enviar somente alguns para uma função, não vou poder utilizar o this.state, estaria enviando dados que não vou utilizar, como seria um cenário que enviasse apenas alguns campos do this.state?

5 respostas
solução

Fala ai Santi, tudo bem? Vamos lá:

O que vocês acham?

Achei muito bom, eu gosto de funções que são responsáveis por limpar o estado, faço algo bem parecido também.

estou enviando o meu this.state no método inserir, isso quer dizer que estou enviando todos os campos definidos no state do construtor, certo ?

Certo, isso ai, está enviando o estado completo.

Mas, e seu eu tiver um state com uma maior quantidade de campos definidos e quiser enviar somente alguns para uma função, não vou poder utilizar o this.state, estaria enviando dados que não vou utilizar, como seria um cenário que enviasse apenas alguns campos do this.state?

Ai nesse caso você poderia fazer uma desestruturação do estado, algo assim:

const { a, b, c } = this.state
this.props.inserir({ a, b, c });

Nesse caso ele pega as propriedades a, b e c, extrai para uma variável e depois passa cria um novo objeto com esses valores.

Espero ter ajudado.

Entendi, as variáveis dentro do desestruturador do estado deve ser o mesmo nome contido no this.state?

Sim Santi, senão elas serão undefined, dá uma olhada nesse artigo:

https://blog.matheuscastiglioni.com.br/es6-o-javascript-do-momento-parte-02/

Eu explico um pouco como funciona esse processo.

Espero ter ajudado.

Obrigado, ajudou muito.

Magina, sempre que precisar não deixe de criar suas dúvidas.

Abraços e bons estudos.