Повторный вызов обработчика реакции после выполнения функции - PullRequest
Новая
       54

Повторный вызов обработчика реакции после выполнения функции

0 голосов
/ 26 мая 2020
• 1000 нажата кнопка: 
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?

1 Ответ

1 голос
/ 26 мая 2020

Ваша функция 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>

      ...
  )
}
...