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

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>
...
)
}