反应不从更新的环境文件中获取数据

Question

我的.env文件中有一些环境变量，当数据库中的某些值更新时，这些环境变量也会更新。

示例：

REACT_APP_FIREBASE_ID=1234567890

当我将其登录到我的React应用程序上的控制台时：

console.log(process.env.REACT_APP_FIREBASE_ID) //this gives "1234567890"

但是当.env文件用其他更新时：

示例：

REACT_APP_FIREBASE_ID=9876543210

日志仍然给出旧值：

console.log(process.env.REACT_APP_FIREBASE_ID) //this still gives "1234567890"

我在开发人员模式的CRA中使用“ npm start”

如果终止服务器并再次重新启动服务器，则可以在控制台看到正确的输出。 但是，这在“ npm run build”

之后不起作用

在生产模式下更改.env文件后，如何清除环境缓存？

Answer 1

最好将您的API密钥存储在Google APIs > Credentials中。 article中有关如何实现此目标的更多详细信息。

这种存储方式比使用.env文件更安全。

Answer 2

这就是我解决的方法。

我的第一种方法是从.env文件中获取值，但是除非重新启动服务器，否则该方法将不起作用。 [不良]

我的第二个想法是创建一个JSON文件并保留其中的数据，并在更新数据库时更新JSON文件。 遗憾的是，这是一种非常糟糕的方法，因为CRA（或可能是任何React项目）无法调用src文件夹之外的文件，并且在构建后，没有范围更改已构建的js文件。 [非常糟糕]

最后，我设法使用这种方法解决了这个问题 [我猜是DECENT]

• 以键值格式保存表中的数据（您也可以将其保存为JSON格式）
• 在加载应用程序（加载主组件）后，调用获取该键值（或JSON）并将其存储在浏览器的LocalStorage中的API。
• 使用localStorage.getItem("theKeyName")
在应用程序上获取值

提示： 您可以在进行API调用之前检查密钥是否已经存在于LocalStorage上。

if(localStorage.getItem("theKeyName") !== null) {
    //your API fetch request or redux dispatch
}