javascript - ReactJS 生命周期方法不按顺序工作

Question

我正在使用 ReactJS 进行 Google map 渲染。为此，我正在使用“react-google-maps”库。逻辑流程是；在页面加载时，获取用户的位置并将其绘制在 map 上。 向用户提供导航链接以点击不同的 URL。为了处理导航，我使用 React 路由器。在 componentWillMount() 中识别用户的位置，然后相应地设置状态并在 render() 中渲染 map 。 问题是 render() 在完成 componentWillMount() 之前被调用，它获取空值并且失败。这种情况只出现在客户端路由中，不会出现在服务端渲染中。

为了限制执行方式，我将 componentWillMount() 作为异步方法，它会等待直到确定用户的位置。尽管如此，这仍然没有帮助。

state = {
        homeLocation: {},
        coordinates: []
    }

async componentWillMount(props) {
        const { lat,lng } = await this.getcurrentLocation();
        this.setState({
            homeLocation:{
                lat: lat, 
                lng: lng
            }
        })
    }

getcurrentLocation() {

        if (window.navigator && window.navigator.geolocation) {
          return new Promise((resolve, reject) => {
            window.navigator.geolocation.getCurrentPosition(pos => {
              const coords = pos.coords;
              resolve({
                lat: coords.latitude,
                lng: coords.longitude
              });
            });
          });
        }
        return {
          lat: 0,
          lng: 0
        };
      }
render(){

   <MapWithAMarker
   // necessary parameters
  />
}

//Routers
const AppRouter = () => (
    <Router>
        <div>
            <Switch>
                <Route path="/" component={MapHomeLocation} exact={true}/>
                <Route path="/location/:locationType" component={MapSelectedLocation}/>
                <Route component={Notfound}/>
            </Switch>
        </div>

    </Router>
);


The expected result is that coordinates should be determined first then render() should get called. In server-side routing(i.e. using anchor tags instead of <Link>) it works as expected.

Answer 1

您应该像这样检查数据是否存在，然后只给出值。

如果数据 && data.length > 0 ?数据:空