函数执行后重新调用反应钩子 [英] Re-Calling a react hook after a function is executed

问题描述

我是 React 钩子的新手，我有一个钩子函数，它从 API 接收一系列数据以显示在列表中:

I am new to react hooks and I have a hook function which receives a series of data from an API to be shown in a list:

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]
}

我还有另一个功能，可以在按下按钮时删除作业:

and I have another function which deletes the jobs when a button is pressed:

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 函数正确执行，我的作业被删除，但我的屏幕没有实时更新，需要刷新才能显示新数据.执行 DeleteJob 函数后，如何让 useJob() 钩子接收新数据(作业)?

the problem is that the DeleteJob function executes correctly and my job gets deleted, but my screen doesnt get updated in real time and it needs refreshing to show the new data. how can I make my useJob() hook receive the new data (jobs) after the DeleteJob function is executed?

推荐答案

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

Your DeleteJobs function also needs to delete the job value from state as your data from server is only fetched on initial render. For that you can expose a method from custom hook and use it when calling 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>

      ...
  )
}

这篇关于函数执行后重新调用反应钩子的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！