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

时间:2019-11-05 12:48:21

标签: javascript reactjs react-hooks

我有这个反应无状态组件,第一个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会在更新之前读取值,无论如何我该如何修复它以读取更新的值?

1 个答案:

答案 0 :(得分:0)

第二种用法:inputworker' C:/logstash-7.3.0/logstash-core/lib/logstash/java_pipeline.rb:302:in