尝试初始化反应属性时出现问题

Question

问题详情

1. .env 值未在 React 属性中初始化
   
2. siteKey 值始终为空

react 中的属性

const [siteKey] = useState(process.env.REACT_CAPTCHA_SITE_KEY);

输入.env

REACT_CAPTCHA_SITE_KEY='some key'

HTML

<ReCAPTCHA sitekey={siteKey} />

Answer 1

主要问题在于您的环境声明，根据 create-react-app:

您必须创建以以下开头的自定义环境变量 REACT_APP_。除 NODE_ENV 之外的任何其他变量都将被忽略 避免意外暴露机器上的私钥 有相同的名字。更改任何环境变量都需要 如果开发服务器正在运行，请重新启动它。

由于

useState

不需要任何 setter 方法，因此您可以仅使用

const

定义变量，例如：

const siteKey = process.env.REACT_APP_CAPTCHA_SITE_KEY

Answer 2

我在你的代码中看到了一些问题，首先是，

UseState

钩子初始化是错误的。 应该是，

  const [siteKey, setsiteKey] = useState(process.env.REACT_APP_CAPTCHA_SITE_KEY);

而且你不需要像

useState

那样使用这个环境变量，因为它不会改变，所以当你需要访问环境变量时，使用如下，

例如：

const siteKey=process.env.REACT_APP_CAPTCHA_SITE_KEY;

其他重要问题是，

您的环境变量应在 .env 文件中以

REACT_APP_

为前缀。 例如：

process.env.REACT_APP_SOME_VARIABLE

可能的问题是，您的 .env 文件不在您的根目录中，即与包位于同一目录中。 json 文件。

Answer 3

.env 中的密钥应该是，如下所示

REACT_APP_CAPTCHA_SITE_KEY=some_key_value

此外，每当您编辑 .env 文件时，您都需要重新启动 React 应用程序以使修改后的文件生效。