API 键返回未定义反应

Question

我正在用 React 构建一个天气应用程序，我需要使用 2 个 api 键。我有一个 .env 设置，它对第一个键工作正常，但我似乎无法将我的第二个键设置为 return 一个值，当我进行 fetch 调用时它一直显示为未定义。

我的 .env 设置如下。我知道命名约定需要包含 REACT_APP 才能被拾取，但我不确定如何区分它们两个并让它们仍然被拾取。

REACT_APP_APIKEY={MyOpenWeatherAPIKEY}
REACT_APP_APIKEY2={MyUnSplashAPIKEY}

知道如何解决吗？

编辑： 对于任何有同样问题的人。答案是在 .env 文件中设置密钥的正确方法。但不要忘记终止您的应用程序，然后在更改 .env 文件后重新启动它。

Answer 1

不需要添加到变量REACY_APP你可以在env文件中定义变量名

OPEN_WEATHER={APIKEY}

首先你需要安装dotenv包 npm 安装 dotenv --save

将此行添加到您的应用程序中：

require('dotenv').config()

最后使用此命令获取变量值

process.env.OPEN_WEATHER

如果您需要任何其他帮助，请告诉我

Answer 2

在你的 .env 中试试这个：-

REACT_APP_OPEN_WEATHER_KEY=whateveryouropenweatherkeyis
REACT_APP_UNSPLASH_KEY=whateveryourunsplashkeyis

注意这里不需要花括号

然后您可以像这样在代码中的任何位置访问它们：process.env.REACT_APP_OPEN_WEATHER_KEY，process.env.REACT_APP_UNSPLASH_KEY

注意： 确保 .env 在根项目目录中，即与 package.json

相同

API Key returning undefined react