reactJS中未定义环境变量答案

【问题标题】：environment variables are undefined in reactJSreactJS中未定义环境变量
【发布时间】：2022-06-18 13:38:56
【问题描述】：

我正在开发一个使用 spotify API 的应用程序。我有一些我想以客户端 ID、端点等形式保存的秘密。我已经完成了在反应中成功使用环境变量所需的一切。这包括在我的变量前面加上 REACT_APP_ 并确保 .env 在根文件夹中。在下面显示的代码中，我可以简单地控制台记录我的环境变量。

 const login = useRef(`${process.env.REACT_APP_AUTH_ENDPOINT}?client_id=${process.env.REACT_APP_CLIENT_ID}&redirect_uri=${process.env.REACT_APP_REDIRECT_URI}&response_type=${process.env.REACT_APP_RESPONSE_TYPE}`);

然而，当我尝试在此处的渲染中访问它们时，它是未定义的

{!token ?

            <a href={login.current}>Login to spotify</a>
            :
            <button onClick={logout}>Logout </button>

          }
          {
            token ?

              <form onSubmit={searchArtists}>
                <input type='text' onChange={e => setSearchKey(e.target.value)} placeholder='search for a song or artist' />
                <button type='{submit}'>Search</button>
              </form>
              
              :
              <h2>Please login</h2>
          }
}

我确保使用 useRef 挂钩只是为了确保值保持不变，以便在我想要返回渲染以进行反应时使用我的秘密。这无济于事。我有一种感觉，这与我刷新时有关吗？或者在我转到我的重定向 URI 后，我的环境可能会清除？我也没有费心导入 dotenv，因为从我读过的内容来看，React 自己处理所有这些。这里还有 .env 文件供参考：

REACT_APP_CLIENT_ID =*************************
REACT_APP_REDIRECT_URI =https://swipewithspotify.vercel.app/
REACT_APP_AUTH_ENDPOINT =https://accounts.spotify.com/authorize
REACT_APP_RESPONSE_TYPE =token

如果我有一些错误的概念，如果可能的话，我希望得到解释或任何形式的说明，以确保解决这个问题。

【问题讨论】：

您是否重新启动了您的应用程序？每当您添加或更改环境变量时，您都必须重新启动
我每次更改某些内容时都会重新启动它。另外，它无论如何都是一个反应应用程序，所以我相信它会在保存时重新启动。 @RichardHpa
在.env 文件中去掉= 符号前的空格
去掉空格。当我想在渲染中使用它们时，这似乎对环境变量的存在没有影响。但我很欣赏它是正确的 .env 语法。

标签： javascript reactjs

【解决方案1】：

如果我们遇到未定义的类型错误，添加环境变量的最佳方法，我解决了同样的问题。请按照以下步骤操作。

npm install dotenv-webpack --save-dev
在根文件夹下创建 .env 文件 3.创建环境变量为

REACT_APP_MY_API=342432...

在根文件夹下创建webpack.config.js文件，内容如下
将相同的代码添加到 webpack.config.js

const Dotenv = require('dotenv-webpack'); 模块.exports = { 插件：[ 新的 Dotenv() ] }

5.您可以在根文件夹或src文件夹中使用您想要的位置

像这样访问变量

const apiKey = process.env.REACT_APP_MY_API;

【讨论】：