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

Uso do bind

olá, tudo bem?

Eu fiquei com uma dúvida conceitual simples aqui

Pq que o bind foi utilizado para os métodos: apagarNota e criarNota

Porém não foi utilizado para o state notas?

obrigado

import React, { Component } from "react";
import ListaDeNotas from "./components/ListaDeNotas";
import FormularioCadastro from "./components/FormularioCadastro";
import "./assets/App.css";
import './assets/index.css';
class App extends Component {

  constructor(props) {
    super();
    this.state = {
      notas: [],
    }
  }

  criarNota(titulo, texto) {
    const novaNota = { titulo, texto }
    const novoArrayNotas = [...this.state.notas, novaNota]
    const novoEstado = {
      notas: novoArrayNotas
    }
    this.setState(novoEstado)
  }

  apagarNota(index) {
    let arrayNotas = this.state.notas;
    arrayNotas.splice(index, 1)
    this.setState({ notas: arrayNotas })
    console.log(arrayNotas)
  }

  render() {
    return (
      <section className="conteudo">
        <FormularioCadastro criarNota={this.criarNota.bind(this)} />
        <main>

        <ListaDeNotas
          notas={this.state.notas}
          apagarNota={this.apagarNota.bind(this)}
        />

        </main>
      </section>
    );
  }
}

export default App;
2 respostas
solução!

O this.state.notas não é um método, é sua array de notas, desta forma não acessa nada de fora dela mesmo, por isso não precisa do bind.

Já os seus métodos apagarNota e criarNota precisam do método bind para ter acesso a variáveis e métodos da sua classe App, no seu exemplo o método this.setState e a array this.state.notas.

Lembrando que o método** bind()** cria uma nova função que, quando chamada, tem sua palavra-chave this definida com o valor fornecido, ou seja, se você não fizer o this.criarNota.bind(this) o "this" dentro do escopo de criarNota não seria a classe App, estaria underfined.

Obrigado Lário

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