反应中的动作后刷新表答案

【问题标题】：refresh table after action in react反应中的动作后刷新表
【发布时间】：2019-01-06 02:15:27
【问题描述】：

您好，我尝试制作一个 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;

我在这里尝试过，我的删除和更新工作，但只有在我刷新页面时才确认修改。

【问题讨论】：

标签： javascript reactjs crud

【解决方案1】：

看起来你只有get来自Index组件的componentDidMount中API的业务数据。

相反，您应该有一个从 API 获取数据的方法，并在 TableRow 中 delete 方法的 componentDidMount 和 .then 中调用它。

例如：

componentDidMount(){
  this.getBusinessData();
}
getBusinessData() {
    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} getBusinessData={this.getBusinessData} key={i} />;
  });
}

在 TableRow 中：

delete() {
    axios.get('http://localhost:4000/business/delete/'+this.props.obj._id)
        .then(() => {
            console.log('Deleted'));
            this.props.getBusinessData();
        })
        .catch(err => console.log(err))
}

请注意，您还必须将该方法作为道具传递给 TableRow，以便它可以访问它。

【讨论】：

【解决方案2】：

在你的删除函数中你应该更新状态

     delete() {
        axios.get('http://localhost:4000/business/delete/'+this.props.obj._id)
            .then(()=>{
                        let list=this.state.business.filter((item)=>return (item.id===this.props.obj._id))
                        this.setState({business:list})}
            .catch(err => console.log(err))
    }

idk 在你的情况下如何删除，因为我不知道列表，但它应该是相似的

【讨论】：

【解决方案3】：

您必须在删除/编辑请求的回调中更新您的数据。

目前，您只记录删除成功。

【讨论】：