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

Posted 2023-02-25

【中文标题】useRef 有时不会更新，只打印对象

【英文标题】：useRef is not updating sometime and print just object

【发布时间】：2021-08-30 18:00:56

【问题描述】：

我正在尝试同时使用 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 未定义。大部分时间都很好，并且按预期工作。

不好

不错

我该如何解决这个问题？

【参考方案1】：

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

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

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

【讨论】：

我尝试使用正常的 useRef 但它不起作用并给了我相同的结果。这就是为什么我尝试与回调一起使用。但仍然没有运气。

【参考方案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 等。它不应该与那些一起工作。

【讨论】：

是的，最初我尝试使用正常的 useRef，但它不起作用并给了我相同的结果。这就是为什么我尝试与回调一起使用。但仍然没有运气。