Javascript object显示为null但点击后看到有值但无法访问

Question

我正在使用 ReactHook 开发项目，但我遇到了 React.createRef() 的问题。我遇到了这个问题，我想知道这种情况叫什么？以及如何解决？如图1，显示object的值为null 但是当我点击查看的时候。那里有值，但我无法通过键访问它的值，因为我无法访问 null 的键。
图1.After我试过console.log变量googleMap

import { Map, GoogleApiWrapper } from "google-maps-react";
import { GOOGLE_API_KEY } from "../../key.js";

const storePage = ({google}) => {
  const googleMap = React.createRef();
  console.log(googleMap.current.map);
  ...

图2.I只需使用React.createRef()即可访问组件

...
return (
<Map
            google={google}
            zoom={16}
            initialCenter={{ lat: yourLocation.lat, lng: yourLocation.lng }}
            style={{ height: "20rem" }}
            ref={googleMap}
          ></Map>)
}
const enhance = compose(
  GoogleApiWrapper({ apiKey: GOOGLE_API_KEY }),
  connect(mapStateToProps, mapDispatchToProps)
);

export default enhance(StorePage);

图3.I想要访问图1中获取值的组件

图4.But 当我通过键访问值时（像这样googleMap.current.map），出现像这样的错误

Answer 1

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

const googleMap = useRef(null);

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

注意我使用了钩子来创建引用。这将做的是运行每当 googleMap ref 的值发生变化时使用效果。 IE：引用渲染前后。

Javascript object显示为null但点击后看到有值但无法访问

Javascript object show null but after click to see there are value but cannot access

javascript

object

ref

reactjs

react-hooks