使用REACTION-MAP-GL和CREATE-REACT-APP时地图不显示

我正在使用Create Reaction应用程序，以及react-map-gl。我现在只需要地图显示在屏幕上，但它所做的一切只是显示MapBox徽标，并且在地图应该在的地方有一个空白区域。 以下是我的主.js文件：

    import './App.css';
    import ReactMapGL from 'react-map-gl';
    import React, {useState} from 'react';

    function App() {
      const [viewport, setViewport] = useState({
        width: 400,
        height: 400,
        latitude: 38.958630,
        longitude: -77.357002,
        zoom: 10
      });
      return (
        <div className="TextStuff">
          <ReactMapGL {...viewport}
          mapboxApiAccessToken={process.env.REACT_APP_MAPBOX_TOKEN}>MAPPPPP</ReactMapGL>
        </div>
      );
    }

    export default App;

---

解决方案

经过调查，我得出的结论是您的令牌没有通过process.env正确地传递到您的组件。我创建了一个reproducible example，它有一个有效的令牌，它像一个咒语一样工作。提供无效令牌时，我得到的结果与您相同。 所以我猜您得到的是未定义的令牌，或者类似这样的东西。

tutorial之后，您应该有一个.env文件，其中存储令牌的方式如下所示： REACT_APP_MAPBOX_TOKEN=MYTOKEN

尝试注销您的process.env.REACT_APP_MAPBOX_TOKEN，以查看您获得的内容。

但我怀疑您将.env文件放在了src文件夹中。但是你不应该把它放在那里。相反，请将其放在项目的根目录下，然后重新启动服务器。这样，您应该可以正确获取令牌。