如何更新钩子内部的状态并从另一个钩子中读取

Question

我有这个react无状态组件，第一个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在更新之前正在读取值，无论如何，我如何修复它以读取更新后的值？

Answer 1

在第二个中使用：useEffect(()=>{...},[state]);