执行函数后重新调用反应钩子

Question

我是反应钩子的新手，我有一个钩子函数，它从 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>

问题是 DeleteJob 函数执行正确，我的作业被删除，但我的屏幕没有实时更新，需要刷新才能显示新数据。如何让我的useJob() 钩子在 DeleteJob 函数执行后接收新数据（作业）？

Answer 1

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

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

  const deleteJob = (id) => { // function that removes job from state
      setJobs(prevJobs => prevJobs.filter(job => job.id !== id));
  }
  React.useEffect(() => {
    fetchJSON('/api/jobs/list-jobs', { headers: headers })
      .then(setJobs)
  }, [])

  ....
  return [jobs, locations, departments, tags,deleteJob]
}


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, deleteJob] = useJobs()
  return (
      ...
      {jobs.map(job => (
      ......
       <IconButton 
          aria-label='delete'
          style={{ color: 'red' }} 
          variant='outlined' 
          onClick={() => { 
              DeleteJob(job.id); 
              deleteJob(job.id); // locally delete from state
          }}
       >
           <DeleteIcon />
       </IconButton>

      ...
  )
}