useRef 有时不会更新，只打印对象

Question

我正在尝试同时使用 useRef 和 useCallback，但似乎我的 useRef 有时不会更新。这实际上很奇怪，而且只是偶尔发生。即使我使用正常的 ref 操作，它的行为也是一样的。

function useRefCallback() {
  const ref = useRef(null);
  const setRef = useCallback(node => {
    ref.current = node;
  }, []);
  return [ref, setRef];
}

function MapWidget({ options }) {
  const [mapWidgetRef, setMapWidgetRef] = useRefCallback();
// I try to pass to another hook to get width and height of that mapWidgetRef.
  const [mapWidgetWidth, mapWidgetHeight] = useResizeObserver(mapWidgetRef); 

  return (
    <div ref={setMapWidgetRef}>
    ...
    </div>

}

如果我尝试打印出mapWidgetRef，有时我会得到object，这并不好，它会使mapWidgetWidth, mapWidgetHeight 未定义。大部分时间都很好，并且按预期工作。

不好

不错

我该如何解决这个问题？

Answer 1

为 useCallback 提供所需的所有依赖项很重要

const setRef = useCallback(node => {
    ref.current = node;
}, [ref]);

但是这会使其无效，您可以像往常一样使用 ref，如果需要一些需要记忆的操作，请使用 useCallback 代码的那部分

Answer 2

我很难理解

function useRefCallback() {
  const ref = useRef(null);
  const setRef = useCallback(node => {
    ref.current = node;
  }, []);
  return [ref, setRef];
}

一个简单的useRef 应该已经适合你了。使用前请务必查看ref.current。

  const ref = useRef()
  return <div ref={ref}>

你有点和新旧裁判一起工作。老实说，新的 ref 涵盖了这两种情况，仅在某些极端情况下，ref 必须使用旧的 ref 语法才能使其正常工作。但总的来说，以上几行应该可以工作。

注意：ref 不会在每次渲染中更新。只有当 DOM 发生变化时，例如。安装，卸载，然后更新。所以不需要使用useCallback 等。它不应该与那些一起工作。