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".
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