Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

da onde vem o autor?

Oi.

A minha dúvida é parecida com a do colega Marcelo, entao copiei o tipico dele

Na transcrição:

"Em App.js, criaremos um método escutadorDeSubmit() que receberá a unidade autor e setará o estado do nosso componente utilizando o spread operator, adicionando a unidade autor que foi recebida."

E no código:

escutadorDeSubmit = autor => {
  this.setState({ autores:[...this.state.autores, autor]})
}

Entendo que a unidade do autor vai para a variável autor, mas como? o unico local que menciona autor é nessas 2 linhas, como o javascript sabe que um unico autor tem que constar nessa variavel se eu nao atribuo em local nenhum?

2 respostas
solução!

Fala ai Viviane, tudo bem? Vamos lá:

Entendo que a unidade do autor vai para a variável autor, mas como? o unico local que menciona autor é nessas 2 linhas, como o javascript sabe que um unico autor tem que constar nessa variavel se eu nao atribuo em local nenhum?

Vamos lá, tentarei explicar por partes o processo.

Começando pelo App.js, temos a declaração do componente Form:

<Form escutadorDeSubmit={this.escutadorDeSubmit}/>

Repare que o Form está recebendo uma propriedade chamada escutadorDeSubmit que será uma referência para a função escutadorDeSubmit do App.js.

Dentro do form, podemos ver que ao clicar no botão, ele chama a função submitFormulario:

<button type="button" onClick={this.submitFormulario}>Salvar</button>

E se a gente olhar o que a função submitFo rmulario do Form.js faz:

submitFormulario = () => {
    this.props.escutadorDeSubmit(this.state);
    this.setState(this.stateInicial);
}

Ela vai chamar a função escutadorDeSubmit que chegou via propriedade e como parâmetro vai mandar o estado completo do componente Form.js, no caso:

this.stateInicial = {
        nome:'',
        livro:'',
        preco:'',
    }

Ou seja, ele vai enviar um objeto com as proprieades nome, livro e preco. Sabendo que a propriedade escutadorDeSubmit é uma referência para a função do App.js, podemos dar uma olhada nela:

escutadorDeSubmit = autor => {
  this.setState({ autores:[...this.state.autores, autor]})
}

Repare que ela recebe apenas um parâmetro, no caso, estamos chamando ele de autor (poderia ser qualquer outro nome).

Dessa maneira, o que foi passado em this.props.escutadorDeSubmit(this.state); irá chegar na função escutadorDeSubmit = autor =>.

Se a gente fizer por exemplo:

this.props.escutadorDeSubmit('Matheus');

Na função do App.js:

// o autor seria = 'Matheus'
escutadorDeSubmit = autor => {
  this.setState({ autores:[...this.state.autores, autor]})
}

A ideia é mais ou menos essa.

Espero ter ajudado.

Observe que no seu render() presente no arquivo Formulario.js há:

const {nome, livro, preco} = this.state;

Eles possuem exatamente o mesmo nome dos atributos presentes em state

this.stateInicial = {
            nome:'',
            livro:'',
            preco:'',
        }

        this.state = this.stateInicial;

De forma + clara ainda:

//state guarda um objeto JS com os { atributos : "valores" }
this.state = {
    nome: '',
    livro: '',
    preco: ''
}

Quando você preenche os campos do formulario, lembre-se que a cada mudança no input, o metodo escutadorDeInput é disparado:

escutadorDeInput = event => {
        //A partir de event.target, pegaremos o name e o value do campo. Ex: <input id="nome" type="text" name="nome" value="Josh ferreira">
        //name = nome do elementoHTML / value = valor digitado pelo usuario.
        const { name, value } = event.target;

//A cada evento disparado de mudança do input, queremos atualizar o estado do componente para que essa mudança seja refletida nele e exibida na tela.
//[name] sempre equivale a um campo de nosso state. Ex: [name] : value ==  atributo : "valor". Ex2: livro : "DevOps" 
//lembre-se: a unica forma de atualizar os dados contidos dentro de um state é via .setState({informando o atributo : valor a serem alterados})
        this.setState({
            [name] : value
        });
    }

Portanto, quando você termina de preencher seus campos, antes de clicar no botão salvar, o this.state já está com os valores tds definidos

this.state = {
    nome: 'Viviane Porto',
    livro: 'React 1',
    preco: 'R$ 720,00'

É isto que vc passa p/ o this.props.escutadorDeSubmit(this.state);

Voltando ao app.js que é onde está definido esta função, trocando p/ miudos:

//novoAutor é o msm que 'state' a qual foi passado por parâmetro em Formulario.js =)

escutadorDeSubmit = (novoAutor) => {
    this.setState({
    //pega tds os dados anteriores + novoAutor e insira na propriedade autores.
    autores : [...this.state.autores, novoAutor]})
  }

Enfim... É assim que acontece a mágica do meu ponto de vista... Qualquer coisa, o instrutor Matheus complementará pra gnt. Espero que eu tenha ajudado vc com um pouco mais de clareza. E vamos continuar o curso p/ irmos logo pra parte 2 rs =) Bons estudos!

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software