React-Map-GL - 无法将环境变量传递给组件答案

【问题标题】：React-Map-GL - Can't pass environmental variable to componentReact-Map-GL - 无法将环境变量传递给组件
【发布时间】：2020-07-28 22:00:29
【问题描述】：

我正在使用react-map-gl 将 Mapbox 集成到我的项目中。我的地图组件如下所示：

import * as React from 'react';
import { useState } from 'react';
import ReactMapGL from 'react-map-gl';

function Map() {
  const [viewport, setViewport] = useState({
    width: 400,
    height: 400,
    latitude: 37.7577,
    longitude: -122.4376,
    zoom: 8
  });

  return (
    <ReactMapGL
      {...viewport}
      mapboxApiAccessToken={process.env.REACT_APP_MAPBOX_KEY}
      onViewportChange={nextViewport => setViewport(nextViewport)}
    />
  );
}

export default Map;

我收到“无令牌警告”并且我的地图没有显示。如果我用实际的字符串键换出process.env.REACT_APP_MAPBOX_KEY，它就可以正常工作。为什么我不能在我的.env 文件中使用变量并将其传递给 mapboxApiAccessToken？

在我的.env 文件中，我的关键变量如下所示： REACT_APP_MAPBOX_KEY=这里的实际字符串

为什么这不起作用？

【问题讨论】：

添加env变量后是否重启了项目？
重新启动，它工作。主要面相。非常感谢，这让我发疯了。
乐于助人:)
@IdrissAITHAFID 你知道如果它在生产中有什么问题吗？我在 Heroku 上也有类似的问题。该项目在我的开发环境中运行良好，但在生产中显示 NO_TOKEN_WARNING。我已经每天简单地设置了 config/prod.js。比如module.exports = { REACT_APP_MAPBOX_TOKEN: process.env.REACT_APP_MAPBOX_TOKEN, }
您拥有的 .env 文件的名称是什么？你可能只在 .env.development 上设置了

标签： reactjs environment-variables mapbox react-map-gl

【解决方案1】：

不要使用 process.env 它不适用于 react-map-gl 直接粘贴令牌它可以正常工作

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。