Siemka, powiedzmy, że mam tabelę w MySQL z jednym polem.
Teraz tę samą tabelę wczytuję sobie nodem do komponentu w react, ale tam dodaję kolumnę np. z przyciskami "dodaj". Powiedzmy, że chcę żeby przycisk w każdym rzędzie robił to samo (np. insert wartości 15 do tabeli i jest on też submitem do forma).
I teraz moje pytanie brzmi: w jaki sposób mogę po kliknięciu któregoś z tych przycisków przeładować komponent wraz z ponownym wczytaniem danych z tabeli?
Aktualnie po kliknięciu któregoś przycisku ten insert działa w bazie, ale strona po prostu pokazuje mi response z node'a (wczytywane dane z sql)
NODE:
app.get('/car', async (request, response) => {
const sql = 'select SN from wypozyczenia order by data desc limit 10';
con.query(sql, (err, result) => {
if(err) throw err;
response.send(result);
});
con.close;
});
app.post('/car', async (request,response) => {
console.log("hejka!");
const sql = 'insert into wypozyczenia (SN) values (15)';
con.query(sql, (err, result) => {
if(err) throw err;
});
con.close;
const sql2 = 'select SN from wypozyczenia order by data desc limit 10';
con.query(sql2, (err, result) => {
if(err) throw err;
response.send(result);
});
con.close;
});
REACT:
handleSubmit(event) {
event.preventDefault();
this.setState({change: this.state.change + 1});
alert (this.state.change);
}
componentDidMount(){
fetch('http://localhost:5000/car')
.then(response => response.json())
.then(response => this.setState({response: response}))
}
componentDidUpdate(){
fetch('http://localhost:5000/car', {
method: 'POST',
body: JSON.stringify(),
headers: { //very important
'Content-Type': 'application/json'
},
})
.then(response => response.json())
.then(response => this.setState({response: response}))
}