如何解决useRef 值在初始渲染时未定义
我正在制作带有 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>
);
}
解决方法
您的问题是更新 ref 不会使组件重新渲染,因此 useEffect 只运行一次,并且在第一次渲染时,ref 仍然为空。
您所描述的是正确的行为,您需要等待重新渲染才能对引用执行任何操作。如果您强制重新渲染,您将能够使用 ref.current 属性:
const MapView = ({ breweries }) => {
const markerGroupRef = useRef(null);
const [refAquired,setRefAquired] = useState(false)
//...
useEffect(() => {
setRefAquired(true)
},[]);
useEffect(()=> {
console.log(markerGroupRef.current)
},[refAquired])
这是一个粗略的演示,您应该尝试将渲染周期与其他渲染和业务逻辑联系起来。
,作为替代方案,您可以通过 useEffect
钩子强制组件在其初始渲染后立即再次渲染,以确保对元素的访问。我不确定这是否是最佳做法,但老实说,对性能的影响很小。
const [shouldUpdate,setShouldUpdate] = useState(true)
// set shouldUpdate => true on initial render,triggering re-render
useEffect(() => {
if (shouldUpdate) setShouldUpdate(false)
},[shouldUpdate])
,
useRef 创建的引用不会触发组件重新渲染。所以你创建的 useRef 钩子永远不会执行。此外,由于您将 ref 初始化为 null,因此在第一次渲染开始时,它将保持为 null。在第一次渲染期间,ref={markerGroupRef}
上的 FeatureGroup
会更新它,但它不会再次触发另一个渲染。必须修改状态以触发任何可能的重新渲染。
您可能希望使用回调引用 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 节点时运行一些代码, 您可能想改用回调引用。
,好吧,在摆弄之后我想通了。我没有直接使用 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])
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。