3

Olá, atualmente estou desenvolvendo em React e estou tentando colocar uma div dentro do .catch. Atualmente estou utilizando o seguinte código:

  componentDidMount() {
axios.get(API_ListaEmpresa)
  .then(response => {
    this.setState({ lista: response.data });
    console.log(response.message)
  })
  .catch(error => {
    alert('Teste');
  })
}

Ao invés do

alert('Teste');

gostaria de colocar o seguinte código:

    <div>
  <Alert variant="warning">
    <Alert.Heading>ERRO!</Alert.Heading>
    <p>
      Houve um erro na hora de carregar a lista de empresas. Iremos tentar novemente recarregando a página.
      Clique em Recarregar para Recarregar a página ou clique em Cancelar para permanecer na página.
    </p>
    <hr />
    <div>Erro!!!</div>
    <hr />
    <div className="d-flex justify-content-end">
      <Button variant="outline-success">
        Recarregar
      </Button>
    </div>
  </Alert>
</div>

Como devo fazer isso?

1 Resposta 1

4

A maneira correta não é colocar uma div dentro do catch, mas sim mudar o state para que essa div seja mostrada...

Assim no catch usa:

componentDidMount() {
    axios.get(API_ListaEmpresa)
      .then(response => {
        this.setState({ lista: response.data });
        console.log(response.message)
      })
      .catch(error => {
        this.setState({showError: true});
      })
}

e algures no render() deves ter lógica para mostrar um componente (caso sem erro) ou a div com o erro (caso com erro);

render() {
    return this.state.showError ? <ErrorComponent> : <NormalFlowComponent>;
}
2
  • Teria como fazer o render porém sem utilizar a parte de lógica? Esse alert que quero dar ele só vai ser chamado quando tiver um erro, por conta deste motivo queria apenas renderizar a <div>. Seria possível?
    – Gabriel
    Commented 20/08/2019 às 20:51
  • @Gabriel a ideia de React é fazer o UI ser uma expressão do state, ou seja prepara os componentes que existem e podem alguma vez ser mostrados e depois o state é quem decide o que deve ser mostrado ou não. A ideia de "criar uma div dentro do catch" é uma maneira de pensar mais relacionada com gerações anteriores de JavaScript como jQuery. Cria o UI como uma função do estado e vais ver que começas a pensar de maneira diferente. Faz sentido?
    – Sergio
    Commented 20/08/2019 às 21:00

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 .