ResizeObserver API未在React中获取更新的状态
ResizeObserver API未在React中获取更新的状态
提问于 2021-08-06 21:51:25
我正在使用ResizeObserver在调整屏幕大小时调用一个函数，但我需要在观察者中获得状态的更新值，以便在调用该函数之前确定一些条件。
大概是这样的：
let [test, setTest] = React.useState(true)
const callFunction = () => {
console.log('function invoked')
setTest(false) // => set 'test' to 'false', so 'callFunction' can't be invoked again by the observer
}
const observer = React.useRef(
new ResizeObserver(entries => {
console.log(test) // => It always has the initial value (true), so the function is always invoked
if (test === true) {
callFunction()
}
})
)
React.useEffect(() => {
const body = document.getElementsByTagName('BODY')[0]
observer.current.observe(body)
return () => observer.unobserve(body)
}, [])不要担心细节或我为什么要这样做，因为我的应用程序比这个例子复杂得多。
我只需要知道是否有一种方法可以在观察者中获得更新值。我已经花了相当长的时间试图弄清楚这一点，但我还不能。
有什么想法吗？
回答 1
Stack Overflow用户
回答已采纳
发布于 2021-08-07 07:13:42
问题是，您在组件的每次重新渲染中都定义了新的观察者，将其移动到useEffect中将解决问题。此外，您还必须将此observer.unobserve(body)更改为此observer..current.unobserve(body)。
我创建这个codesandbox是为了向您展示如何正确地执行此操作。这样，您不需要外部变量，并且可以安全地使用状态。
import { useEffect, useState, useRef } from "react";
const MyComponent = () => {
const [state, setState] = useState(false);
const observer = useRef(null);
useEffect(() => {
observer.current = new ResizeObserver((entries) => {
console.log(state);
});
const body = document.getElementsByTagName("BODY")[0];
observer.current.observe(body);
return () => observer.current.unobserve(body);
});
return (
<div>
<button onClick={() => setState(true)}>Click Me</button>
<div>{state.toString()}</div>
</div>
);
};
export default MyComponent;页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/68687806
复制相关文章
相似问题
腾讯云开发者
