react hooks中当数据为最新的数据，并且页面已渲染，打印仍为原来的数据

react hooks中当数据为最新的数据，并且页面已渲染，打印仍为原来的数据

1、当页面点击增加按钮时，数字随之加1，但在监听的滚动事件中拿不到新值

import { Button } from "antd";
import React, { useEffect, useRef, useState } from "react";
import ReactDOM from "react-dom";

const App = () => {
  const [number, setNumber] = useState(0);
  const numberRef = useRef(0);
  const contentRef = useRef();
  const handleAdd = () => {
    setNumber((preNumber) => {
      return preNumber + 1;
    });
  };

  useEffect(() => {
    contentRef?.current?.addEventListener("scroll", () => {
      if (contentRef?.current?.scrollTop >= 40) {
        console.log(contentRef?.current?.scrollTop, number);//通过打印得到还是原来的值，并不是增加之后的值
      }
    });
  }, [contentRef?.current?.scrollTop]);

  return (
    <div>
      <p style={{ background: "red" }}>展示在页面中的数据：{number}</p>
      <button onClick={handleAdd}>增加</button>
      <p
        style={{ width: 200, height: 500, overflowY: "auto" }}
        ref={contentRef}
      >
        曾经以为有着大堆大堆的年华搁着无处安放，可那过去了的，终究成了回忆。那些美好时光里的希望便像海上的泡沫般轻轻一碰就破了，碎了。于是我骄傲的抬头，在毒辣的阳光下大步走着。那些快乐啊悲伤啊的日子，被我坚决的抛在脑后！
        记得小时候，总爱把手指放进嘴里吮吸，那味道咸咸的，却也甜甜的。被大人看见后，总是强制性的让我把手指拿出来，可自己又不听，结果便哇哇大哭起来。不过这招也还真管用，每次哭时，爸妈总会哄着自己：“乖，别哭，给你吃糖糖了！”自己便会破涕而笑。那时候吃到了糖就感觉自己是全世界最幸福的人了。以为世界就这么简单，哭哭就好了。
        渐渐长大了，这个习惯不用大人纠正自己也慢慢改掉了。如果现在还把手指放进嘴里，别人铁定会说你幼稚，说你傻。也许是因为害怕自己也被别人说成那样吧，于是就改掉了，也许也不是改掉的，是被自己淡忘了吧．．．．．．
      </p>
    </div>
  );
};
export default App;

2、针对以上问题，解决方案

利用useRef来记录数值，这样的话我们就可以拿到新值

import { Button } from "antd";
import React, { useEffect, useRef, useState } from "react";
import ReactDOM from "react-dom";

const App = () => {
  const [number, setNumber] = useState(0);
  const numberRef = useRef(0);
  const contentRef = useRef();
  const handleAdd = () => {
    numberRef.current = numberRef.current + 1;
  };

  useEffect(() => {
    contentRef?.current?.addEventListener("scroll", () => {
      if (contentRef?.current?.scrollTop >= 40) {
        console.log(contentRef?.current?.scrollTop, numberRef.current);
      }
    });
  }, [contentRef?.current?.scrollTop]);

  return (
    <div>
      <p style={{ background: "red" }}>展示在页面中的数据：{number}</p>
      <button onClick={handleAdd}>增加</button>
      <p
        style={{ width: 200, height: 500, overflowY: "auto" }}
        ref={contentRef}
      >
        曾经以为有着大堆大堆的年华搁着无处安放，可那过去了的，终究成了回忆。那些美好时光里的希望便像海上的泡沫般轻轻一碰就破了，碎了。于是我骄傲的抬头，在毒辣的阳光下大步走着。那些快乐啊悲伤啊的日子，被我坚决的抛在脑后！
        记得小时候，总爱把手指放进嘴里吮吸，那味道咸咸的，却也甜甜的。被大人看见后，总是强制性的让我把手指拿出来，可自己又不听，结果便哇哇大哭起来。不过这招也还真管用，每次哭时，爸妈总会哄着自己：“乖，别哭，给你吃糖糖了！”自己便会破涕而笑。那时候吃到了糖就感觉自己是全世界最幸福的人了。以为世界就这么简单，哭哭就好了。
        渐渐长大了，这个习惯不用大人纠正自己也慢慢改掉了。如果现在还把手指放进嘴里，别人铁定会说你幼稚，说你傻。也许是因为害怕自己也被别人说成那样吧，于是就改掉了，也许也不是改掉的，是被自己淡忘了吧．．．．．．
      </p>
    </div>
  );
};
export default App;