环境变量.env在组件中不起作用

Question

我是google地图和.env环境变量的新手我有一个渲染google地图的组件，我正在尝试设置环境变量，而不是直接嵌入google地图API键，但它没有显示。这是我的密码。。。

import React from "react"
import {GoogleMap, LoadScript, Marker} from "@react-google-maps/api"
const MapContainer = () => {
const mapStyles = {
height: "50vh",
width: "100%"
}
const defaultCenter = {
lat: 40.668259, lng: -73.949158
}

const locations = [
{
name: "Brooklyn, NY",
location: {
lat: 40.668259,
lng: -73.949158
}
}
]
return (
<LoadScript
googleMapsApiKey={`${process.env.REACT_APP_GOOGLE_KEY}`}>
<GoogleMap
mapContainerStyle={mapStyles}
zoom={13}
center={defaultCenter}>
{
locations.map(item => {
return (
<Marker key={item.name} position={item.location}/>
)
})
}
</GoogleMap>
</LoadScript>
)
}
export default MapContainer

有人能帮帮我吗？

Answer 1

我的也不起作用，然后我阅读了Alexei Darmin的建议，并转到了提到的Stackoverflow链接。只需要在其中一个答案的底部读几个字。。。添加.env文件后运行npm start。。。是的。。。成功了。