1

Estou iniciando meus estudos com React a precisava de uma ajuda: eu tenho uma aplicação que mostra uma lista de "soluções".

Nela também tem um botão que vai para uma página nova (que eu programei via Router) capaz de adicionar mais "soluções". inserir a descrição da imagem aqui

O problema é que quando eu adiciono uma nova "solução" via setState(), ao voltar para a página anterior (a página que mostra todas as soluções) o state volta ao estado inicial e a solução adicionada é apagada.

Tentei pesquisar no StackOverflow em inglês e vi que eles tinham uma solução, que pelo que entendi, é uma dependência chamada HISTORY. Mas encontrei pouquíssima informação sobre isso, e ficou confuso a explicação.

Segue o código que faz uso do Router e também faz o setState():

class App extends Component {
  constructor(props) {
    super(props)

    this.handleSave = this.handleSave.bind(this)

    this.state = {
      data: [
        {
          nome: 'Andamento',
          desc: 'Quando o contrato está em andamento e pode ser alterado'
        },
      ]
    }
  }

handleSave(e) {
    e.preventDefault()

    let nome = document.querySelector('[data-js="nome"]').value
    let desc = document.querySelector('[data-js="desc"]').value

    // SALVANDO O SETSTATE, TUDO CERTO!
    this.setState(prevData =>({
      data: [{nome: nome, desc: desc}, ...prevData.data]
    }))

    console.log(this.state.data)
  }

  render() {
    return (
      <div className="App">
        <BrowserRouter>
          <Switch>
            <Route path="/" exact
              render={() => <SituacoesList data={this.state.data} />} />
            <Route path="/addnew" exact
              render={() => <SituacaoAdd data={this.state.data}
              handleSave={this.handleSave} />} />
          </Switch>
        </BrowserRouter>
      </div>
    );
  }
}

A classe que mostra os dados é uma classe simples que apenas mostra a lista de dados via .map(), ela não faz nenhuma alteração no this.state.data.

Se precisarem de mais alguma informação, é só pedir!

Segue repositório do GitHub com o código completo: https://github.com/BiancaPereira/react-incidents-list

1 Resposta 1

2

O seu bug está sendo causado pelo uso da TAG <a href="/" onClick={this.props.handleSave}>Salvar</a>. Utilizando essa tag você força que seja atualizado a página montando todos os seus componentes de novo, dessa forma perdendo todos estados que haviam sido alterados.

Utilizando o react-router-dom é recomendável você utilizar o componente Link que já faz todo o controle do seu browse history.

Quando você utiliza a tag você força a atualização da página que faz uma requisição nova carregando os arquivos para o browser novamente sem necessidade. Utilizando o Link a página é atualizada sem requisições, utilizando a estrutura do React para renderizar de novo seus componentes. Ou seja, vai ficar muito mais rápido.

Para utilizar o Link basta você informar o path desejado da mesma forma.

import { Link } from 'react-router-dom';

// [...]

<Link to='/' onClick={this.props.handleSave}>Salvar</Link>

// [...]

1
  • 1
    Perfeito Paulo, era isso mesmo! Commented 23/05/2019 às 1:23

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 .