Javascript对象显示null，但单击后查看有值但无法访问

我正在使用ReactHook开发这个项目，我遇到了

React.createRef（）

的问题。我遇到了这个问题，我想知道这种情况叫什么？如何修复它？如图1所示，它显示了对象的值为null，但当我单击查看它时。那里有值，但我无法通过键访问它的值，因为我无法访问null键。
图1.在我尝试

console.log

variable googleMap之后

import{Map，GoogleApiWrapper}来自“谷歌地图反应”；
从“./../KEY.js”导入{GOOGLE_API_KEY}”；
const storePage=（{google}）=>{
const googleMap=React.createRef（）；
log（googleMap.current.map）；
...

图2.我只是使用

React.createRef（）

来访问组件

。。。
返回(
)
}
常数增强=合成(
GoogleApiWrapper（{apiKey:GOOGLE_API_KEY}），
连接（MapStateTrops、mapDispatchToProps）
);
导出默认增强（StorePage）；

图3.我想访问组件以获得如图1所示的值

图4.但当我通过键访问该值时（如图

googleMap.current.map

），会出现如图所示的错误

import React, {useEffect, useRef} from 'react';

const googleMap = useRef(null);

useEffect(() => {
    console.log(googleMap && googleMap.currentValue)
}, [googleMap])

---

注意，我使用了钩子来创建ref。这将在googleMap ref的值更改时运行use effect。IE：在ref呈现之前和之后。

这是类还是函数组件？在您创建console.log时，该组件可能尚未呈现。在DOM中呈现之前，它不会有值。如果您在类组件中，您可以在componentDIdMount生命周期中捕捉到这一点。如果它是一个功能组件，您可以在useEffect hooka功能组件中执行此操作。请不要显示代码图片。显示代码。