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;