Async/await 上下文 Api 钩子 - 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() 只更新页码然后 return 它......这是具有该功能的 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

您不能等待并设置状态，因为它不能那样工作。这就是为什么我们使用 useEffect hook

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

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

只要页面发生变化，它就会在 if 条件或函数

中调用并且不调用 useEffect

Async/await 上下文 Api 钩子 - React

Async/await with Context Api Hooks - React

async-await

reactjs

react-context

react-hooks