按下按钮时，setState仅在第二次按下时起作用

Question

我正试图在按下按钮时增加页面状态。当我按下按钮时，状态为1。它只有在下一次印刷后才能工作。

const { state, fetchMissions } = useContext(MissionContext);
const [page, setPage] = useState(1);
const loadMoreData = () => {
setPage(page + 1);
if (state.missions && page !== 1) {
fetchMissions(page);
}
};
<Button title="load more data" onPress={loadMoreData}></Button>

也使用导航事件

<NavigationEvents onWillFocus={() => fetchMissions(page)} />

我是不是错过了什么？非常感谢。

Answer 1

setState是异步的。该值不必在下一行更新。

对setState的调用是异步的-不要依赖于这个.state来在调用setState 后立即反映新值

来源：reactjs.org，为什么setState给了我错误的值？

我建议使用useEffect。

const { state, fetchMissions } = useContext(MissionContext);
const [page, setPage] = useState(1);
const loadMoreData = () => {
setPage(page + 1);
};
useEffect(()=>{
// this is called only if the variable `page` changes
(state.missions && page !== 1) && fetchMissions(page);
}, [page]);

默认情况下，效果在每次完成渲染后运行，但只有当某些值发生更改时，才能选择激发效果。

来源：reactjs.org，useEffect

所以我把[page]作为第二个参数，告诉React何时调用这部分代码。