使用 Context Api Hooks 进行异步/等待 - React

Question

我使用 Context API 来管理我的应用程序全局状态，我第一次尝试使用钩子来做到这一点……我在 async/await 方面遇到了一些麻烦，让我解释一下：

这是我的提供者：

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

// ... 

 }

在该 Provider 中，我有一个函数nextPage()，它只更新页码并在此之后返回它……这是具有该函数的 Provider：

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

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

因此，当页面更改时，您可以执行您的功能，useEffect 第二个参数接受一组依赖项，只要它发生更改就会触发

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

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