react-map-gl Style Uncaught Error: Style is not done loading

Question

我正在使用 React-MAP-GL，但在尝试更新 样式未完成加载 时出现问题=11=]对象。

import React from 'react';
import ReactMapGL from 'react-map-gl';
import {defaultMapStyle, dataLayer} from './map-style.js';

import {fromJS} from 'immutable';
import geoJson from './cali.json';

export default class Map extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      mapStyle: defaultMapStyle,
      data: null,
      viewport: {
        width: 600,
        height: 800,
        latitude: 36.7783,
        longitude: -119.4179,
        zoom: 5,
      },
    };
  }

  componentDidMount() {
    window.addEventListener('resize', this._resize);
    this._loadData(geoJson);
  }


  _loadData = data => {
    const mapStyle = defaultMapStyle
      .setIn(['sources', 'incomeByState'], fromJS({type: 'geojson', data}))
      .set('layers', defaultMapStyle.get('layers').push(dataLayer));

    this.setState({data, mapStyle});
  };

  render() {
    return (
      <div>
        <ReactMapGL
          {...this.state.viewport}
          mapStyle={this.state.mapStyle}
          onViewportChange={viewport => {
            this.setState({viewport});
          }}
          mapboxApiAccessToken=""
        />
      </div>
    );
  }
}

Answer 1

react-map-gl 上的示例对我不起作用，而这正是他们所做的。我认为他们的方法之所以有效，只是因为 requestJson 在回调中有 this._loadData，但我正在预加载 geojson.

componentDidMount() {
    window.addEventListener('resize', this._resize);
    this._resize();

    requestJson('data/us-income.geojson', (error, response) => {
      if (!error) {
        this._loadData(response);
      }
    });
  }

但我确实找到了一些修复它的方法：

选项#1：

setTimeout(() => this._loadData(geoJson), 1);连1milli-second用原方法解决问题

选项#2：不要使用 ComponentDidMount 加载数据，只需将 onClick 或 'onScroll' 事件放在其他地方即可加载数据。有点老套...

选项#3：使用onLoad！由于某些原因，我一开始没有找到这个方法...

<MapGL
          ref={map => (this.mapRef = map)}
          {...this.state.viewport}
          mapStyle={this.state.mapStyle}
          onLoad={() => this._loadData(geoJson)}
          onViewportChange={viewport => {
            this.setState({viewport});
          }}
          mapboxApiAccessToken="8jiOnPbYA"
        />

react-map-gl Style Uncaught Error: Style is not done loading

react-map-gl Style Uncaught Error: Style is not done loading

reactjs

react-map-gl