Javascript 在函数执行后重新调用react钩子

我是react hooks的新手，我有一个hook函数，它从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(() => {
....
  return [jobs, locations, departments, tags]
}

我还有一个功能，当按下按钮时，会删除作业：

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

...

export default function Jobs () {
  const classes = useStyles()
  const [jobs, locations, departments, tags] = useJobs()
  return (
      ...
{jobs.map(job => (
......
 <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，
标题：标题
})
}
...
导出默认函数作业（）{
常量类=useStyles（）
const[jobs，location，department，tags]=useJobs（）
返回(
...
{jobs.map（job=>(
......
DeleteJob（job.id）}>

---

问题是DeleteJob函数执行正确，我的作业被删除，但我的屏幕没有实时更新，需要刷新以显示新数据。如何使我的

useJob（）

hook接收新数据（作业）执行DeleteJob函数后？

您的DeleteJobs函数还需要从状态中删除作业值，因为只有在初始渲染时才会从服务器中获取数据。为此，您可以从自定义挂钩中公开一个方法，并在调用

DeleteJobs

函数useJobs（）{
const[jobs，setJobs]=React.useState（[]）
const[locations，setLocations]=React.useState（{}）
const[departments，setDepartments]=React.useState（{}）
const[tags，setTags]=React.useState（{}）
const deleteJob=（id）=>{//从状态中删除作业的函数
setJobs（prevJobs=>prevJobs.filter（job=>job.id！==id））；
}
React.useffect（（）=>{
fetchJSON（'/api/jobs/list jobs'，{headers:headers}）
.然后（设置作业）
}, [])
....
返回[作业、位置、部门、标签、删除作业]
}
函数DeleteJob（jobid）{
console.log（'deletejob-fired'）
console.log（作业ID）
axios({
方法：“删除”，
url:'/api/jobs/delete job/'+jobid，
标题：标题
})
}
导出默认函数作业（）{
常量类=useStyles（）
const[jobs，location，department，tags，deleteJob]=useJobs（）
返回(
...
{jobs.map（job=>(
......
{ 
DeleteJob（job.id）；
deleteJob（job.id）；//从状态本地删除
}}
>
...
)
}

为什么您有两个

useEffect

调用？我有多个调用，一个接收作业，其他的基于作业信息为其他功能保留异步函数幸运的是，在我删除作业后，此功能仍然没有更新。它仍然需要刷新您是否正确定义和调用了deleteJob？因为如果您这样做，您将使用ate正在正确更新const deleteJob=（id）=>{setJobs（prevJobs=>prevJobs.filter（job=>job.id===id））}，并调用它

onClick={（）=>{deleteJob（job.id）；deleteJob（job.id）；//从状态本地删除}

onClick={（）=>{deleteJob（job.id）deleteJobs（job.id）}