初始渲染时未定义 useRef 值

Posted 2023-03-16

【中文标题】初始渲染时未定义 useRef 值

【英文标题】：useRef value is undefined on initial render

【发布时间】：2021-05-02 14:37:21

【问题描述】：

我正在使用 react 和 react-leaflet 制作地图。 React Leaflet 有一个名为 FeatureGroup 的类，我想在第一次渲染时使用 React 中的 useRef 钩子访问它，然后访问 useEffect 函数中的值。然而，在初始渲染时，ref 是未定义的（markerRef.current 返回 null）。只有在我对代码进行任何类型的更改后，保存并重新加载 React 应用程序才会获得值

你能告诉我我做错了什么以及如何使 markerRef.current 在初始渲染时不为空吗？

请在下面找到该组件的缩写代码：

import useRef from 'react';
import FeatureGroup, //...  from 'react-leaflet';

const MapView = (breweries) => 
  const markerGroupRef = useRef(null);
  //...
  useEffect(() => 
    if(markerGroupRef.current) 
      //here I want to access a method called getBounds() which is in the markerGroupRef.current object 
      //but markerGroupRef.current has null value and so it doesn't execute
      //when making a save change and react app reloads it has the FeatureGroup class as value as expected
      console.log(markerGroupRef.current)
    
  , [markerGroupRef])
  //...
  return (
            <FeatureGroup ref=markerGroupRef>
              breweries && breweries.map(brewery => <Brewery key=breweries.indexOf(brewery) brewery=brewery/>)
              breweryStore && breweryStore.searchLocation &&  <LocationMarker markerPosition=lat: breweryStore.searchLocation.lat, lng: breweryStore.searchLocation.lon/>
            </FeatureGroup>
    );
  

【问题讨论】：

你如何尝试使用 markerGroupRef

如果你不传递初始值，它在第一次渲染时总是未定义

这是因为 ref 在渲染时间之后更新，因为 DOM 元素在渲染时间之前不存在。 ***.com/questions/22238320/…

@Mr.Robot 感谢您的链接。不过，我不确定如何将其解决方案转换为带有钩子的功能组件。我还更新了我的问题，向您展示我如何尝试在 useEffect 函数中访问它。

【参考方案1】：

useRef 创建的引用不会触发组件重新渲染。所以你创建的 useRef 钩子永远不会执行。此外，由于您将 ref 初始化为 null，因此在第一次渲染开始时，它将保持为 null。在第一次渲染期间，FeatureGroup 上的 ref=markerGroupRef 将更新它，但它不会再次触发另一个渲染。必须修改状态以触发任何可能的重新渲染。

您可能希望使用here 所示的回调引用

function MeasureExample() 
  const [height, setHeight] = useState(0);

  const measuredRef = useCallback(node => 
    if (node !== null) 
      setHeight(node.getBoundingClientRect().height);
    
  , []);

  return (
    <>
      <h1 ref=measuredRef>Hello, world</h1>
      <h2>The above header is Math.round(height)px tall</h2>
    </>
  );

并在这里证明here

请记住，useRef 不会在其内容更改时通知您。 改变 .current 属性不会导致重新渲染。如果你想 当 React 将 ref 附加或分离到 DOM 节点时运行一些代码， 您可能希望使用回调 ref。

【参考方案2】：

作为替代方案，您可以通过useEffect 钩子强制组件在其初始渲染后立即再次渲染，这确保了对元素的访问。我不确定这是否是最佳做法，但老实说，对性能的影响很小。

const [shouldUpdate, setShouldUpdate] = useState(true)

// set shouldUpdate => true on initial render, triggering re-render
useEffect(() => 
  if (shouldUpdate) setShouldUpdate(false)
, [shouldUpdate])

【参考方案3】：

好吧，在摆弄之后我想通了。我没有直接使用 useRef，然后尝试使用 useEffect 挂钩立即访问其值，而是使用 useState 定义 ref，然后使用回调函数在 FeatureGroup 的 ref 属性中设置该状态的值。

所以而不是：

const markerGroupRef = useRef(null)

我现在有：

const [markerGroupRef, setMarkerGroupRef] = useState(null)

然后在我现在的渲染中：

<FeatureGroup ref=ref => setMarkerGroupRef(ref)>...</FeatureGroup>

然后我可以在 useEffect 挂钩中按预期访问 FeatureGroup 类，如下所示：

 useEffect(() => 
    if(markerGroupRef) 
      markerGroupRef.getBounds()
    
  , [markerGroupRef])

【讨论】：

blog.logrocket.com/a-guide-to-react-refs 来自这篇文章：“另外，请确保它不会改变组件的内部状态。”

【参考方案4】：

您的问题是更新 ref 不会使组件重新渲染，因此 useEffect 只会运行一次，并且在第一次渲染时 ref 仍然为空。

您描述的是正确的行为，您需要等待重新渲染才能对 ref 执行任何操作。如果您强制重新渲染，您将能够使用 ref.current 属性：

    const MapView = ( breweries ) => 
        const markerGroupRef = useRef(null);
        const [refAquired, setRefAquired] = useState(false)
        //...
        useEffect(() => 
            setRefAquired(true)
        , []);

        useEffect(()=> 
            console.log(markerGroupRef.current)
        , [refAquired])

这是一个粗略的演示，您应该尝试将渲染周期与您的其他渲染和业务逻辑联系起来。