小编the*_*her的帖子

所以我想做的是，我想在获得用户的纬度和经度后更改地图的中心，下面的代码将使问题更清楚：

<LeafletMap
  center={this.state.UserCurrentPosition}
  zoom={17}
  maxZoom={20}
  attributionControl={true}
  zoomControl={false}
  doubleClickZoom={true}
  scrollWheelZoom={true}
  dragging={true}
  animate={true}
  easeLinearity={0.35}
>
  <TileLayer url='https://tiles.stadiamaps.com/tiles/alidade_smooth_dark/{z}/{x}/{y}{r}.png'/>
  <Marker 
    position={this.state.UserCurrentPosition} 
    icon={L.divIcon({
      className: 'user-marker',
      html: `<div  class='icon icon-location'><span class="circle"></span></div>`,
      iconSize: [40, 40],
      iconAnchor: [24, 24]
    })}>
  </Marker>
</LeafletMap>

以下是我想要做的：

componentDidMount() {
  navigator.geolocation.getCurrentPosition(this.showPosition);
}

showPosition = (position) => {
  this.setState({ UserCurrentPosition: [position.coords.latitude, position.coords.longitude] })
}

因此，在我使用setState更改用户的当前位置后，标记的位置会更新，但地图的位置不会更新，所以我想知道我是否做错了什么，或者如何完成。

我遇到的问题是我有一个带有访问密钥的 API，但我不知道如何使用该 API 访问密钥在组件内设置标头。我在下面的示例中使用默认的获取随机用户 API，但我想知道应该如何以及在哪里添加带有访问密钥的标头？

import React from 'react';

export default class FetchRandomUser extends React.Component {

    async componentDidMount() {
        const url = "https://api.randomuser.me/"
        const response = await fetch(url)
        const data = await response.json();
        this.setState({ person: data.results[0], loading: false })
    }

    render() {
        return <div>
            {this.state.loading || !this.state.person ? (<div>Loading...</div>) : (<div>{this.state.person.name.first}</div>)}
        </div>
    }
}

我有一个反应应用程序，我已部署在站点的子目录上，子目录是这样的www.example.com/iapp，我还将我的package.json路由器配置到该子目录，如下所示。在我的 package.json 中：

 "homepage": "example.com/iapp",

在我的路由器中我添加了如下所示的基本名称

 <Router basename={'/iapp'}>
</Router>

一切工作正常，但路由关闭，当我在除此网址之外的任何地方重新加载页面时： example.com/iapp没有加载任何内容，并且显示空白页面。我知道这与反应路由器的 apache 配置有关htaccess，但我似乎无法解决问题。