有一个自定义钩子:
function useMap(mapRef, location) {
const [map, setMap] = useState(null)
useEffect(() => {
if (mapRef.current !== null && map === null) {
const instance = leaflet.createMap(mapRef, location)//упрощенный код
setMap(instance)
}
}, [map, location])
return map;
}
在具有来自服务器的属性的组件中调用此钩子。
function Map({ location }) {
const mapRef = useRef(null)
const map = useMap(mapRef, location)
return (
<div
ref={mapRef}
style={{ height: height }}
/>
)
}
我的问题是,在组件的第一次呈现之后,setMap在useMap中被调用,该组件的下一次呈现几乎立即发生(因为位置很快就从服务器传来了)在同一个钩子中,useMap Map仍然是null
,而不是我们在setMap中传递的,一段时间后,Map仍然会更新,但这可能发生在第2,3,和第四渲染。
我的头脑中有一种理解,即如果setState在上一个渲染器上被调用,那么在下一个渲染器上,它将精确地获取传递给此setState的值。
我试着查了react的所有文件。
1条答案
按热度按时间ki1q1bka1#
您可以使用
setMap
的回调形式来避免重新呈现,该回调形式允许您根据以前的值提供值: