Meu console.log(index) imprime a linha inteira no console, ao invés de um número inteiro | React parte 1: Componentes reutilizáveis para sua webapp

Solucionado (ver solução)

Solucionado
(ver solução)

2
respostas

Referente ao curso React parte 1: Componentes reutilizáveis para sua webapp, no capítulo Entendendo o state e atividade Método de remoção

por Jonatan Zylbersztejn

| 228.5k xp | 21 posts

Percebi que o código não funcionava, ao clicar no botão nada acontecia. Quando inspecionei descobri que não funcionava pois o index estava sendo impresso no console como a linha inteira da tabela. Logo, não iria funcionar já que uma linha nunca vai ser igual a um número inteiro. Mas não consegui descobrir o porquê do index estar sendo impresso assim.

App.js

// resto do código

removeAutor = index =>{
    const {autores} = this.state;
    this.setState(
      {
        autores: autores.filter((index, posAtual)=>{
            console.log(index, posAtual);
            return posAtual !== index;
        }),
      }
    );
  }

  render() {
    return (
      <div className="App">
        <Tabela autores = { this.state.autores } removeAutor = {this.removeAutor}/>
      </div>
    );
  }
}


export default App;

Tabela.js

// resto do código

removeAutor = index =>{
    const {autores} = this.state;
    this.setState(
      {
        autores: autores.filter((index, posAtual)=>{
            console.log(index);
            return posAtual !== index;
        }),
      }
    );
  }

  render() {
    return (
      <div className="App">
        <Tabela autores = { this.state.autores } removeAutor = {this.removeAutor}/>
      </div>
    );
  }
}


export default App;

```

2 respostas

solução!

por Matheus Henrique Castiglioni

| 5307.1k xp | 9007 posts

Instrutor Senior Software Engineer

13/02/2020

Fala ai Jonatan, tudo bem? O problema está no filter, vamos lá:

A função filter vai receber uma outra função de callback que será chamada para todo elemento do array.

Essa função de callback podem receber alguns parâmetros, sendo:

O primeiro será o item atual à ser percorrido.
O segundo será a posição atual do item à ser percorrido no array.
O array com todos os itens.

Nesse caso, o seu index é o primeiro parâmetro e logo será o item completo.

Tente mudar a função para algo assim:

removeAutor = indexParaRemover =>{
    const {autores} = this.state;
    this.setState(
      {
        autores: autores.filter((autor, posAtual)=>{
            console.log(autor, posAtual);
            return posAtual !== indexParaRemover;
        }),
      }
    );
  }

Talvez isso vai resolver o problema.

Espero ter ajudado.