2

export default class UsuarioBox extends Component{

constructor() {
    super();
    this.state = {lista: []};
}

componentDidMount(){
  this.Listar();
}

Listar(){
  axios.get('http://localhost:8000/user').then(function(resposta){
    this.setState({lista: $(resposta.data)});
  }.bind(this));
}

render(){
    return(
        <div>
            <FormUsuario Listar={this.Listar()} />
            <TabelaUsuario lista={this.state.lista} Listar={this.Listar} />
        </div>
    );
}

}

Quando eu subo o servidor o browser começa a travar e quando vou ver no network o mesmo esta fazendo infinitos requests de user na api, acredito eu que o erro esteja em FormUsuario Listar={this.Listar()} /> mas não sei como resolver. Alguma dica?

1 Resposta 1

1

Transforme essa linha

<FormUsuario Listar={this.Listar()} />

em

<FormUsuario Listar={this.Listar} />

Executar a função dentro do render provoca uma nova request, que provoca um setState, que provoca um novo render... Loop infinito. Aliás, o correto é "bindar" o método Listar no construtor da classe (ou utilizar arrow functions).

class MinhaClasse extends React.Component{
    constructor() {
        super();

        this.state = {
            lista: []
        };

        this.Listar = this.Listar.bind(this);
    }

    componentDidMount(){
      this.Listar();
    }

    Listar(){
      axios.get('http://localhost:8000/user')
        .then(function(resposta){
            this.setState({lista: resposta.data}
        ).catch((err)=> {});
    }

    render(){
        return(
            <div>
                <FormUsuario Listar={this.Listar} />
                <TabelaUsuario
                    lista={this.state.lista}
                    Listar={this.Listar}
                />
            </div>
        );
    }
}

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 .