reactjs - React Google Maps API 的问题 - 未捕获的 TypeError：无法读取 null 的属性“getCenter”

Question

我在 Codesandbox 上找到了这个例子：https ://codesandbox.io/s/ir5ks

它与我的项目所需的非常相似，但我遇到了一个似乎无法修复的错误。我已经复制了他的确切代码，除了我更改为导出默认值的最后两行，以便我可以在需要的地方导入它。

当我运行我的 React 应用程序时，它只是返回一个空白屏幕，并在控制台中显示： Uncaught TypeError: Cannot read property 'getCenter' of null at $i.onCenterChanged (App.js:87)

这是这里的这行代码： onCenterChanged={() => setCenter(mapRef.getCenter().toJSON())}

标签： reactjsgoogle-mapstypeerror

Answer 1

错误信息表示mapRef尚未分配。这是令人惊讶的，因为它应该被照顾loadHandler。您应该调查一下，否则在尝试对地图组件执行任何操作时会遇到问题。
无论如何，您可以通过在访问之前检查来防止错误：

onCenterChanged={() => mapRef && setCenter(mapRef.getCenter().toJSON())}