Javascript 如果ReactJS中有页面，如何让应用程序在点击后刷新？

我有一个应用程序，它基本上是一个导航栏，有几个链接到它下面显示的其他页面。一些页面从数据库中提取信息，或者在本例中，具有从数据库中删除信息的功能。按钮工作并删除信息，但为了刷新页面上显示的数据，我必须切换到导航栏上的另一个页面，然后返回到我希望更新的页面

AdminApp.js（为便于阅读而缩短）

import React，{Component}来自'React'；
进口{
行、容器、列、窗体、，
}来自“反应带”；
从“/AdminDashboard”导入AdminDashboard；
从“react Router dom”导入{BrowserRouter as Router，Switch，Route，Link}；
从“/ViewStudents”导入ViewStudents；
从“/withAuth”导入withAuth；
类AdminApp扩展组件{
建造师（道具）{
超级（道具）；
此.state={
dropdownOpen:错误
}    
}  
render（）{
返回(

查看学生
团体


);
}
}
使用Auth导出默认值（AdminApp）；

如果我想在下面的代码中使用“handleSubmit（）”函数，该函数可以从数据库中正确删除用户，我按delete按钮，它会删除用户，但页面不会更新，直到我切换到另一个页面（比如viewgroups），然后返回到它，然后显示不包含已删除学生的表

import React, { Component } from "react";
import {
  Row,
  Container,
  Col,
  Form,
  FormGroup,
  Label,
  Input,
  Button,
  FormText,
  FormFeedback,
  CustomInput
} from "reactstrap";


class ViewStudents extends Component {
  constructor(props) {
    super(props);

    this.state = {
      students: [],
      year: year,
      term: term,
      IDs: [],
      checked: false
    }
    //this.fetch = this.fetch.bind(this)
    //this.getStudents = this.getStudents.bind(this)
    this.handleDelete = this.handleDelete.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  componentWillMount() {
    fetch("http://10.171.204.211/GetStudents/", {
      method: 'POST',
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        year: this.state.year,
        term: this.state.term
      })
    })
    .then(response => {
      return response.json();
    })
    .then(data => {
      this.setState({
        students: data.map(item => ({
          firstName: item.fields.firstName,
          lastName: item.fields.lastName,
          UCFID: item.fields.UCFID,
          term: item.fields.term,
          year: item.fields.year,
          id: item.fields.authID,
        }))
      })

      console.log(this.state);
      console.log(this.state.students);
    })
    .catch( err => {
        console.log(err)
      })

  }

  handleDelete = event => {
    var arr = this.state.IDs
    arr.push(event.target.value)        
    this.setState({
      IDs: arr
  })
  }

  handleSubmit() {
    console.log(this.state);

    fetch("http://10.171.204.211/DeleteStudent/", { ///////// change 
      method: 'POST',
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(this.state)
    })

    this.props.history.go('/AdminApp');
  }

  renderTableData() {
    //this.getStudents(this.state.year, this.state.term);
    return this.state.students.map((student, index) => {
       const { firstName, lastName, UCFID, term, year, id } = student //destructuring
       return (
          <tr>
             <td>{firstName}</td>
             <td>{lastName}</td>
             <td>{UCFID}</td>
             <td>{term}</td>
             <td>{year}</td>
             <td><label>
                    <input type="checkbox" name={id} value={id} 
                    onChange={this.handleDelete.bind(this)} />
                </label></td>
          </tr>
       )
    })
  }

  render() {
    return (
      <Container>
        <Form className="SDForm">
          <Col  className="SDForm">
            <h1 className="mainTitles">View Students</h1>
          </Col>
          <div>
          <table id='projects'>
               <tbody>
               <tr>
                <th>First Name</th>
                <th>Last Name</th>
                <th>UCFID</th>
                <th>Term</th>
                <th>Year</th>
                <th>Delete</th>
               </tr>
               {this.renderTableData()}
               </tbody>
            </table>
          </div>
          <Button onClick={this.handleSubmit}>Delete</Button>
        </Form> 
      </Container>
    );
  }
}

export default ViewStudents;

import React，{Component}来自“React”；
进口{
一行
集装箱，
上校，
形式，
FormGroup，
标签，
输入，
按钮
FormText，
作为反馈，
自定义输入
}从“反应带”；
类ViewStudents扩展组件{
建造师（道具）{
超级（道具）；
此.state={
学生：【】，
年份:年份,，
任期:任期,，
ID:[]，
勾选：假
}
//this.fetch=this.fetch.bind（this）
//this.getStudents=this.getStudents.bind（this）
this.handleDelete=this.handleDelete.bind（this）；
this.handleSubmit=this.handleSubmit.bind（this）；
}
组件willmount（）{
取回（“http://10.171.204.211/GetStudents/", {
方法：“POST”，
标题：{
“接受”：“应用程序/json”，
“内容类型”：“应用程序/json”
},
正文：JSON.stringify({
年份：本州年份，
术语：this.state.term
})
})
。然后（响应=>{
返回response.json（）；
})
。然后（数据=>{
这是我的国家({
学生：data.map（项目=>({
firstName:item.fields.firstName，
lastName:item.fields.lastName，
UCFID:item.fields.UCFID，
术语：item.fields.term，
年份：item.fields.year，
id:item.fields.authID，
}))
})
console.log（this.state）；
console.log（this.state.students）；
})
.catch（错误=>{
console.log（错误）
})
}
handleDelete=事件=>{
var arr=this.state.IDs
arr.push（事件、目标、值）
这是我的国家({
IDs:arr
})
}
handleSubmit（）{
console.log（this.state）；
取回（“http://10.171.204.211/DeleteStudent/“，{///change
方法：“POST”，
标题：{
“接受”：“应用程序/json”，
“内容类型”：“应用程序/json”，
},
正文：JSON.stringify（this.state）
})
this.props.history.go（'/AdminApp'）；
}
renderTableData（）{
//this.getStudents（this.state.year，this.state.term）；
返回this.state.students.map（（学生，索引）=>{
const{firstName，lastName，UCFID，term，year，id}=student//解构
返回(
{firstName}
{lastName}
{UCFID}
{term}
{year}
)
})
}
render（）{
返回(
查看学生
名字
姓
UCFID
学期
年
删除
{this.renderTableData（）}
删除
);
}
}
导出默认视图；

---

我如何使它在按下删除按钮时自动重新加载页面？我尝试过使用这个.props.history.push（'/viewstusts'），但它不起作用，因为该页面显示在AdminApp页面中。我还没有做出反应，所以我还没有弄清楚太多。

当您在视图中使用state，并且在删除后使用此.setState（{…}）更新状态时。React自动重新呈现表格

在

handleDelete

函数中执行此操作

  handleDelete = event => {
    var arr = this.state.IDs
    arr.push(event.target.value)        
    this.setState({
      IDs: arr
  })
   this.setState({students:...}) //set the new data, either update the students array with a new one or fetch the data and update the state again
  }

---

当您在视图中使用状态，并且在删除后使用此.setState（{…}）更新状态时。React自动重新呈现表格

在

handleDelete

函数中执行此操作

  handleDelete = event => {
    var arr = this.state.IDs
    arr.push(event.target.value)        
    this.setState({
      IDs: arr
  })
   this.setState({students:...}) //set the new data, either update the students array with a new one or fetch the data and update the state again
  }

---

如果在删除后重新获取数据，表将重新呈现。您可以将数据获取逻辑封装到它自己的函数中，以便重用。它可能看起来像这样：

getData= () => {
  // fetch your data and set your state as you were doing
  fetch("yourUrl").then(() => {//set your state});
}

componentDidMount(){
  this.getdata();
}

 handleSubmit = () => {
    console.log(this.state);

    fetch("http://10.171.204.211/DeleteStudent/", { ///////// change 
      method: 'POST',
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(this.state)
    })
    .then(() => {
       // set your state with the new data
       this.getData();
     })
  }

---

如果在删除后重新获取数据，表将重新呈现。您可以将数据获取逻辑封装到它自己的函数中，以便重用。它可能看起来像这样：

getData= () => {
  // fetch your data and set your state as you were doing
  fetch("yourUrl").then(() => {//set your state});
}

componentDidMount(){
  this.getdata();
}

 handleSubmit = () => {
    console.log(this.state);

    fetch("http://10.171.204.211/DeleteStudent/", { ///////// change 
      method: 'POST',
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(this.state)
    })
    .then(() => {
       // set your state with the new data
       this.getData();
     })
  }

---

您不需要重新加载页面，您需要使用最新信息“重新加载”设置状态。在单击“删除”时，调用“提取”按钮来执行所需的数据，然后再次设置状态。@但如何重新呈现该表？当前，它在页面打开时自动呈现