有效的地图框令牌是必需的，但我不起作用

Question

我试图用mapbox的集成地图来设置一个react应用程序。当我启动应用程序时，它显示访问令牌无效。但我在网站上使用了公共代币。

VM68 react_devtools_backend.js:4061 Error: **A valid Mapbox access token is required to use Mapbox GL JS. To create an account or a new access token, visit https://account.mapbox.com/**
at $t.errorCb (vendors-node_modules_mapbox-gl_dist_mapbox-gl_js.chunk.js:32679:240)
at $t.getSessionAPI (vendors-node_modules_mapbox-gl_dist_mapbox-gl_js.chunk.js:900:22)
at Map._authenticate (vendors-node_modules_mapbox-gl_dist_mapbox-gl_js.chunk.js:32676:13)
at Map._render (vendors-node_modules_mapbox-gl_dist_mapbox-gl_js.chunk.js:32645:91)
at Map.map._render (bundle.js:34693:17)
at vendors-node_modules_mapbox-gl_dist_mapbox-gl_js.chunk.js:32737:73
overrideMethod @ VM68 react_devtools_backend.js:4061
onError @ bundle.js:33707
Mapbox._onEvent @ bundle.js:34564
fire @ vendors-node_modules_mapbox-gl_dist_mapbox-gl_js.chunk.js:1203
_fireEvent @ bundle.js:34996
(anonymous) @ vendors-node_modules_mapbox-gl_dist_mapbox-gl_js.chunk.js:32679
getSessionAPI @ vendors-node_modules_mapbox-gl_dist_mapbox-gl_js.chunk.js:900
_authenticate @ vendors-node_modules_mapbox-gl_dist_mapbox-gl_js.chunk.js:32676
_render @ vendors-node_modules_mapbox-gl_dist_mapbox-gl_js.chunk.js:32645
map._render @ bundle.js:34693
(anonymous) @ vendors-node_modules_mapbox-gl_dist_mapbox-gl_js.chunk.js:32737

我创建了一个.env.local并将其与我的App.js连接。所以我不明白为什么这不起作用。这是我的App.js:

import React, {useState} from "react";
import ReactMapGL from "react-map-gl";

export default function App() {
const [viewport,setViewport] = useState ({
longitude:-9.993682,
latitude: 53.551086,
zoom: 9,
width: '100vw',
height: '100 vh',
});
return (
<div>
<ReactMapGL
{...viewport} mapboxApiAccessToken= {process.env.REACT_APP_MAPBOX_TOKEN}>
</ReactMapGL>
</div>
);
}

在网站上只发生了一件事：一个灰色的小正方形在点击时徘徊，但我本应该展示一张地图。。。

这里有谁能帮忙吗？

这是我的.env.local:

REACT_APP_MAPBOX_TOKEN="pk.eyJ1IjoibG91c2NoYSIsImEiOiJja3pibmZsZTYwbm1nMm9zNmdpdmJwYW5lIn0.qy5kQf2SjEf4CkSg4JcY1Q"

这是我的文件夹结构：

文件夹结构

Answer 1

您必须提供不带引号的REACT_APP_MAPBOX_TOKEN：REACT_APP_MAPBOX_TOKEN=pk.eyJ1IjoibG91c2NoYSIsImEiOiJja3pibmZsZTYwbm1nMm9zNmdpdmJwYW5lIn0.qy5kQf2SjEf4CkSg4JcY1Q

为了让人们不要滥用你的Mapbox代币，你应该考虑生成一个新的。