0

Estou iniciando com react e não consigo entender porque do código abaixo não funcionar. Recebo a seguinte mensagem: "TypeError: can't access property "aoClicarNota", this is undefined"

Já estou utilizando o aoClicarNota como arrow function mas mesmo assim não funciona. O que estou fazendo de errado?

import React from 'react';
import axios from 'axios';
import { Button, ButtonGroup, Container } from 'react-bootstrap';

class BlocoNotasPossiveis extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            notasPossiveis: [
                {
                    nota: '1',
                    descricaoCurta: 'Nota baixa',
                    descricaoLonga:
                        'Serviços sempre apresentam falhas, com grande impacto na produtividade, gerando retrabalho constantemente.'
                },
                {
                    nota: '2',
                    descricaoCurta: 'Nota ruim',
                    descricaoLonga:
                        'Serviços sempre apresentam falhas, com grande impacto na produtividade, gerando retrabalho constantemente.'
                }
            ]
        };
    }

    render() {
        return (
            <div className="sombra">
                <ButtonGroup aria-label="First group">
                    {this.state.notasPossiveis.map(this.renderizarBotao)}
                </ButtonGroup>
            </div>
        );
    }

    aoClicarNota = () => {
        console.log("valor.nota")
    }

    renderizarBotao(valor) {
        return (
            <Button variant="primary" size="lg" onClick={this.aoClicarNota}>
                <span className="linhaNumeral">{valor.nota}</span>
                <span className="linhaDescricaoCurta">{valor.descricaoCurta}</span>
            </Button>
        );
    }
}

export default BlocoNotasPossiveis;
2
  • Quando vc utiliza componente de classe no react, vc precisa fazer o bind da função dentro do construtor. No seu caso, tente colocar this.aoClicarNota = this.aoClicarNota .bind(this); e veja se funciona.
    – Colasanto
    5/08/2020 às 14:41
  • @Colasanto Infelizmente nao funcionou fazendo o bind no construtor. grato.
    – Davis
    5/08/2020 às 14:52

1 Resposta 1

2

O problema está na sua função renderizarBotao. Dentro dela, você tenta acessar this.aoClicarNota, mas não há um this definido no contexto da função renderizarBotao.

Precisamos definir um this para a sua função renderizarBotao e podemos fazer isso de duas formas:

  1. Fazer o bind manualmente a partir de: this.renderizarBotao = this.renderizarBotao.bind(this); no construtor da classe;
  2. Usar a sintaxe de arrow function para esta função também renderizarBotao = (valor) => {

Aqui um exemplo implementando arrow function: https://codesandbox.io/s/react-playground-gp6io

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .