Question

此刻，我的componentDidMount从数据库检索作业并将其显示在我的主页上。

我创建了一个名为deleteJob的函数，该函数删除了一个Job。问题是我必须刷新页面才能看到更改。

是否可以在不刷新页面的情况下立即看到更改？？我认为如果我在执行功能时以某种方式使componentDidMount重新运行，就可以做到这一点

请告诉我是否可行。

  componentDidMount() {

    axios.get("/getJobs").then(result => {
        console.log("appear!");
      this.setState({ jobData: result.data }, () => {
      console.log(this.state);
  });
    });
    axios.get("/getServices").then(result => {
      this.setState({ serviceData: result.data }, () => {
      });
  });

deleteJob() {
    axios.get("/deleteJob/" + this.props.id).then(result => {
      });
    this.props.close()
}

Answer 1

您为什么看到更改？因为它会更新状态。

因此，删除作业时应更新状态。

最好将axios“ getJobs”提取到该类的方法中，然后在componentDidMount和deleteJobs中调用它。

这样，您将在每次操作时刷新状态。

Answer 2

在这种情况下，您可以执行的操作是在删除作业后再次获取作业，还可以按行为将功能分开，以便可以在不同情况下调用它们

componentDidMount() {
  getJobs();
  getServices();
}

getJobs() {
  axios.get("/getJobs" + this.props.id).then(result => {
       this.setState({ jobData: result.data }
  });
}

getServices() {
  axios.get("/getServices").then(result => {
      this.setState({ serviceData: result.data }
  });
}


deleteJob() {
  axios.get("/deleteJob/" + this.props.id).then(result => {
     getJobs(); // get jobs again after deletion
  });
  this.props.close()
}

Answer 3

您可以使用要删除的ID过滤状态

我们说

componentDidMount() {
    axios.get("/getJobs").then(result => {
      this.setState({ jobData: result.data }, () => {
      console.log(this.state);
  });
}

您可以在单击按钮时调用删除方法

   //Assuming the delete request is post Id
    deleteJob =(id)=>{
    deleteJob() {
      axios.post("/deleteJob/" ,+ id)

      //this will filter out the deleted job from existing state
      let filteredJobs = this.state.jobData.filter(data=>data.id===id)

       this.setState({
            jobData:filteredJobs
       )}
}

这将重新渲染组件，而无需刷新页面并且没有API调用：）

执行函数时是否可以重新运行componentDidMount？

3 个答案: