我有这个反应无状态组件,第一个useEffect应该在组件加载后运行,第二个在我滚动页面时实现无限滚动。
我想做的是更新useEffect内的状态,然后在第二个内部使用更新后的值:
const MyComponent = () => {
const [state,setState] = useState({
page: 1
});
useEffect(() => {
setState({
...state,page: state.page + 1
});
},[]);
useEffect(() => {
if (window.innerHeight + document.documentElement.scrollTop !== document.documentElement.offsetHeight) {
return;
}
console.log(state.page);
window.addEventListener('scroll',handleScroll);
return () => window.removeEventListener('scroll',handleScroll);
},[]);
}
不幸的是,console.log显示页面仍然是一页,即使使用chrome中的react控制台,我也可以看到该值已更改。
我知道useEffect是无状态的,因此console.log会在更新之前读取值,无论如何我该如何修复它以读取更新的值?