ResizeObserver API 没有在 React 中获得更新的状态

Question

我正在使用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)      
}, [])

不要担心细节或为什么要这样做，因为我的应用程序比这个示例复杂得多。

我只需要知道是否有办法在观察者中获取更新的值。我已经花了相当长的时间试图弄清楚这一点，但我还做不到。

有什么想法吗？

Answer 1

问题是，您在组件的每次重新渲染中都定义了新的观察者，将其移入 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;