在 React 中删除项目后如何刷新页面？答案

【问题标题】：How to refresh page after deleting item in React?在 React 中删除项目后如何刷新页面？
【发布时间】：2021-03-05 15:40:21
【问题描述】：

我的问题是当我点击删除按钮时，我可以从表中删除项目，但我需要手动刷新页面。如何解决自动刷新？谁能解决我的问题？我还在下面附上了我的代码部分。这是我的代码部分，还有 Home 组件和 RowCreator 组件：

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;

【问题讨论】：

标签： javascript reactjs page-refresh react-dom

【解决方案1】：

您应该处理从父级删除并更新您的行：

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;

【讨论】：

【解决方案2】：

我建议将您的 delete 调用移至 Home 中采用 id 的函数，并将该函数作为道具传递给 RowCreator。

RowCreator 中的状态从未使用过，更改它并不能真正帮助您。你想要告诉 Home 发生了变化，它需要更新它的状态。

【讨论】：