如何在React中删除项目后刷新页面？
如何在React中删除项目后刷新页面？
提问于 2021-03-05 15:18:45
我的问题是，当我点击删除按钮时，我可以从表格中删除项目，但我需要手动刷新页面。如何解决自动刷新的问题？有人能解决我的问题吗？我还在下面附上了我的代码部分。下面是我的代码部分，还有Home components和RowCreator component：
import React from 'react'
import axios from 'axios'
import {Link} from 'react-router-dom'
import '../App.css';
class Home extends React.Component{
constructor(props) {
super(props)
this.state = {
metersData:[]
}
}
componentWillMount(){
axios.get('http://localhost:8080/meterservices/api/meters').then(res=>{
const metersData = res.data;
this.setState({metersData})
})
}
render(){
return (<div>
<h2>Measuring instruments / Meetinstrumenten:</h2>
<table align='center'>
<thead>
<tr>
<th>Id</th>
<th>Function of the meters</th>
<th>Profile</th>
</tr>
</thead>
<tbody>
{this.state.metersData.map(meter =><RowCreator item={meter} />)}
</tbody>
</table>
<br/>
<Link to={'/addMeter'}><font size="5"><span>Register new Meter device</span></font></Link>
</div>)
}
}
class RowCreator extends React.Component{
handleClick = (event) => {
event.preventDefault();
var meter = this.props.item;
console.log(meter.id)
axios.delete('http://localhost:8080/meterservices/api/meters/'+meter.id).then(res=>{
const metersData = res.data;
this.setState({metersData})
})
}
render(){
var meter = this.props.item;
return<tr>
<td>{meter.id}</td>
<td>{meter.name}</td>
<td>{meter.profile_name}</td>
<td ><Link to={'/meterDetails/'+meter.id}><span>Add monthly data</span></Link></td>
<td><Link to={'/analyze/'+meter.id}><span>Analyze monthly data</span></Link></td>
<button onClick={this.handleClick} >Delete </button>
</tr>
}
}
export default Home;回答 2
Stack Overflow用户
回答已采纳
发布于 2021-03-05 15:32:35
我建议将delete调用上移到Home中的一个接受id的函数，并将该函数作为道具传递给RowCreator。
RowCreator中的状态从未使用过，更改它对您没有真正的帮助。你想要的是告诉Home有一个变化，它需要更新它的状态。
Stack Overflow用户
发布于 2021-03-05 15:35:43
您应该处理从父级删除并更新您的行：
import React from 'react'
import axios from 'axios'
import {Link} from 'react-router-dom'
import '../App.css';
class Home extends React.Component{
constructor(props) {
super(props)
this.state = {
metersData:[]
}
}
handleDelete = (meterId) => {
event.preventDefault();
var meter = this.props.item;
console.log(meterId)
axios.delete('http://localhost:8080/meterservices/api/meters/'+meterId).then(res=>{
// If successfully deleted, update your metersData on state
//const metersData = res.data;
//this.setState({metersData})
})
}
componentWillMount(){
axios.get('http://localhost:8080/meterservices/api/meters').then(res=>{
const metersData = res.data;
this.setState({metersData})
})
}
render(){
return (<div>
<h2>Measuring instruments / Meetinstrumenten:</h2>
<table align='center'>
<thead>
<tr>
<th>Id</th>
<th>Function of the meters</th>
<th>Profile</th>
</tr>
</thead>
<tbody>
{this.state.metersData.map(meter =><RowCreator item={meter} onDelete={handleDelete} />)}
</tbody>
</table>
<br/>
<Link to={'/addMeter'}><font size="5"><span>Register new Meter device</span></font></Link>
</div>)
}
}
class RowCreator extends React.Component {
constructor(props) {
super(props);
state = {metersData:[]}
}
render(){
var meter = this.props.item;
return<tr>
<td>{meter.id}</td>
<td>{meter.name}</td>
<td>{meter.profile_name}</td>
<td ><Link to={'/meterDetails/'+meter.id}><span>Add monthly data</span></Link></td>
<td><Link to={'/analyze/'+meter.id}><span>Analyze monthly data</span></Link></td>
<button onClick={() => this.props.onDelete(meter.id)} >Delete </button>
</tr>
}
}
export default Home;页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/66488309
复制相关文章
相似问题
腾讯云开发者
