Question

我正在使用Context 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])

每当页面更改时，如果有条件或功能，它将在内部调用和不调用 useEffect

使用上下文Api挂钩进行异步/等待-React

1 个答案: