Async/await with Context Api Hooks - React

Question

我使用上下文 API 来管理我的应用程序全局状态，我第一次尝试使用钩子来做到这一点......我在异步/等待方面遇到了一点麻烦，让我解释一下：

这是我的提供者：

const JobProvider = (props) => {
const [modalOpen, setModalOpen] = useState(false)
const [modalJob, setModalJob] = useState({})
const [jobs, setJobs] = useState([])
const [searchItem, setSearchItem] = useState('')
const [page, setPage] = useState(1)
const [now, setNow] = useState('')

const handleSearchChange = (e) => {
setSearchItem(e.target.value)
}

const getJob = id => {
// bla bla bla 
return something;
};
// ... 
}

在该提供程序中，我有一个函数nextPage((它只更新页码并在此之后返回它......下面是具有该函数的提供程序：

const JobProvider = (props) => {
const [modalOpen, setModalOpen] = useState(false)
const [modalJob, setModalJob] = useState({})
const [jobs, setJobs] = useState([])
const [searchItem, setSearchItem] = useState('')
const [page, setPage] = useState(1)
const [now, setNow] = useState('')

const handleSearchChange = (e) => {
setSearchItem(e.target.value)
}

const getJob = id => {
// bla bla bla 
return something;
};

async function nextPage() {
await setPage(page + 1)
console.log(page)
}
// ... 

}

但首先是记录页面，并且仅在更新状态页面之后。有什么办法可以做到这一点吗？

Answer 1

您不能执行等待并设置状态，因为它不以这种方式工作。这就是我们使用useEffect钩子的原因

因此，当页面更改时，您可以执行功能，useEffect 第二个参数接受依赖项数组，每当它发生变化时，它都会触发

useEffect(() => {
// do your logic
}, [page])

每当页面更改时，它都会调用并且不会调用useEffectin if 条件或函数