ResizeObserver API 没有在 React 中获取更新状态
ResizeObserver API doesn't get the updated state in React
我正在使用 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)
}, [])
不要担心细节或我为什么要这样做,因为我的应用程序比这个例子复杂得多。
我只需要知道是否有办法在观察者中获取更新后的值。我已经花了相当多的时间试图解决这个问题,但我还做不到。
有什么想法吗?
问题是,您在每次重新渲染组件时都定义了新的观察者,将其移动到 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;
我正在使用 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)
}, [])
不要担心细节或我为什么要这样做,因为我的应用程序比这个例子复杂得多。
我只需要知道是否有办法在观察者中获取更新后的值。我已经花了相当多的时间试图解决这个问题,但我还做不到。
有什么想法吗?
问题是,您在每次重新渲染组件时都定义了新的观察者,将其移动到 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;