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

【问题标题】：Async/await with Context Api Hooks - React使用 Context Api Hooks 进行异步/等待 - React
【发布时间】：2019-12-30 15:53:42
【问题描述】：

我正在使用 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;
       };

// ... 

 }

在该提供程序内部，我有一个函数 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)
         }

    // ...

}

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

【问题讨论】：

setPage 不返回承诺，因此您不能等待它。但是，您可以通过useEffect 记录值

标签： reactjs async-await react-hooks react-context

【解决方案1】：

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

所以当页面改变时你可以做你的功能，useEffect 第二个参数接受一个依赖数组，只要它发生变化就会触发

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

每当页面发生变化时，它会在 if 条件或函数内部调用并且不会调用 useEffect

【讨论】：