嗨,我试图制作一个 MERN 应用程序
但是有一件事,当我更新或删除页面时,页面没有刷新,我该怎么做?我创建了一个索引,其中列出了我的所有条目
// index.component.js
import React, { Component } from 'react';
import axios from 'axios';
import TableRow from './TableRow';
export default class Index extends Component {
constructor(props) {
super(props);
this.state = {business: []};
}
componentDidMount(){
axios.get('http://localhost:4000/business')
.then(response => {
this.setState({ business: response.data });
})
.catch(function (error) {
console.log(error);
})
}
tabRow(){
return this.state.business.map(function(object, i){
return <TableRow obj={object} key={i} />;
});
}
render() {
return (
<div>
<h3 align="center">Liste des billets</h3>
<table className="table table-striped" style={{ marginTop: 20 }}>
<thead>
<tr>
<th>Nom Prénom</th>
<th>Poste</th>
<th>Téléphone</th>
<th colSpan="2">Action</th>
</tr>
</thead>
<tbody>
{ this.tabRow() }
</tbody>
</table>
</div>
);
}
}
这是我的选项表
// TableRow.js
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:4000/business/delete/'+this.props.obj._id)
.then(console.log('Deleted'))
.catch(err => console.log(err))
}
render() {
return (
<tr>
<td>
{this.props.obj.nomPrenom}
</td>
<td>
{this.props.obj.posteEntreprise}
</td>
<td>
{this.props.obj.numeroTel}
</td>
<td>
<Link to={"/edit/"+this.props.obj._id} className="btn btn-primary">Editer</Link>
</td>
<td>
<button onClick={this.delete} className="btn btn-danger">Supprimer</button>
</td>
</tr>
);
}
}
export default TableRow;
这是我在这里尝试的,我的删除和我的更新工作,但只有在我刷新页面时才确认修改。