Javascript 在函数执行后/在函数内部再次调用react钩子（ReactJS）

我不熟悉react钩子，我创建了一个react钩子函数，它从API接收一些数据，这些数据显示在我的页面上：

function useJobs () {
  const [jobs, setJobs] = React.useState([])
  const [locations, setLocations] = React.useState({})
  const [departments, setDepartments] = React.useState({})
  const [tags, setTags] = React.useState({})

  React.useEffect(() => {
    fetchJSON('/api/jobs/list-jobs', { headers: headers })
      .then(setJobs)
  }, [])
  React.useEffect(() => {
......

这里我有一个删除功能，它是在按下一个按钮后执行的，它会删除我列表中的项目

function DeleteJob (jobid) {
  console.log('deletejob fired')
  console.log(jobid)
  axios({
    method: 'delete',
    url: '/api/jobs/delete-job/' + jobid,
    headers: headers
  })
  useJobs()
}

.....

<IconButton aria-label='delete' style={{ color: 'red' }} variant='outlined' onClick={() => DeleteJob(job.id)}>
     <DeleteIcon />
</IconButton>

函数删除作业（作业ID）{
console.log（'deletejob-fired'）
console.log（作业ID）
axios({
方法：“删除”，
url:'/api/jobs/delete job/'+jobid，
标题：标题
})
useJobs（）
}
.....
DeleteJob（job.id）}>

---

但问题是，该项目被删除，但我的显示没有得到更新；因此，为了做到这一点，我在上面的函数中再次调用了

useJobs（）

hook，以便在删除之后更新我的显示；但是我收到了一些错误，说我违反了一些规则。如何正确更新页面？

在deleteJob函数中，您应该执行以下操作：

    function DeleteJob (jobid) {
      console.log('deletejob fired')
      console.log(jobid)
      axios({
        method: 'delete',
        url: '/api/jobs/delete-job/' + jobid,
        headers: headers
      }).then(job => {
    // I am assuming your '/api/jobs/delete-job/' + jobid 
    //returns back the deleted job

    // since jobs is an array, you can filter the array and //update the state back with setJobs

    setJobs(jobs.filter(value => value.id != job.id));
            });
// If '/api/jobs/delete-job/' + jobid 
    //does not returns back the deleted job use
setJobs(jobs.filter(value => value.id != jobid));
        }

    .....

    <IconButton aria-label='delete' style={{ color: 'red' }} variant='outlined' onClick={() => DeleteJob(job.id)}>
         <DeleteIcon />
    </IconButton>

函数删除作业（作业ID）{
console.log（'deletejob-fired'）
console.log（作业ID）
axios({
方法：“删除”，
url:'/api/jobs/delete job/'+jobid，
标题：标题
}).然后（作业=>{
//我假设您的“/api/jobs/delete job/”+jobid
//返回已删除的作业
//由于jobs是一个数组，因此可以过滤数组并//使用setJobs更新状态
setJobs（jobs.filter（value=>value.id！=job.id））；
});
//如果“/api/jobs/delete job/”+jobid
//不返回已删除的作业使用
setJobs（jobs.filter（value=>value.id！=jobid））；
}
.....
DeleteJob（job.id）}>

---

这应该可以正常工作

您需要从钩子声明调用setter函数（例如setJobs）来更新状态。除非更新状态，否则显示不会更新。为什么要进行否决投票？oOno'/api/jobs/delete job/'+jobid不会返回在函数中传递的使用jobid的任何内容