Изучаю React, и вот на просторах интернета наткнулся на небольшой туториал по которому у меня возник вопрос
Есть такой вот код:
import React, {Component} from 'react';
import {Link} from 'react-router-dom';
import axios from 'axios'
class TableRow extends Component {
constructor(props) {
super(props);
this.delete = this.delete.bind(this);
}
delete() {
axios.get('http://localhost:4200/serverport/delete/' + this.props.obj._id)
.then(console.log('Deleted'))
.catch(err => console.log(err))
}
render() {
return (
<tr>
<td>{this.props.obj._id}</td>
<td>{this.props.obj.name}</td>
<td>{this.props.obj.port}</td>
<td>
<Link to={"/edit/" + this.props.obj._id} className="btn btn-primary">Edit</Link>
</td>
<td>
<button onClick={this.delete} className="btn btn-danger">Delete</button>
</td>
</tr>
);
}
}
export default TableRow;
import React from 'react'
import axios from 'axios';
import TableRow from './TableRow'
export default class IndexComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
serverports: [],
};
}
componentDidMount() {
axios.get('http://localhost:4200/serverport')
.then(response => {
this.setState({serverports: response.data})
})
.catch((error) => {
console.log(error)
})
}
tabRow() {
return this.state.serverports.map((objects, i) => {
return <TableRow
obj={objects}
key={i}/>
});
};
render() {
return (
<div style={{marginTop: 50}}>
<div className={"container"}>
<table className={"table table-striped"}>
<thead>
<tr>
<td>ID</td>
<td>Name</td>
<td>Port</td>
</tr>
</thead>
<tbody>
{this.tabRow()}
</tbody>
</table>
</div>
</div>
)
}
}
По кнопке "Delete" данные удаляются, но на стороне сервера, то есть только после перезагрузки страницы я вижу, что именно удалил. А как сделать так, чтобы удалить запись и на клиенте, без перезагрузки?