Как добавить ErrorBoundary в машину маршрутизации листовок в React? - PullRequest
Новая
       23

Как добавить ErrorBoundary в машину маршрутизации листовок в React?

0 голосов
/ 28 октября 2019

Я работал с Leaflet Routing Machine в React и хочу иметь возможность использовать границы ошибок, чтобы справляться с ошибками маршрутизации, особенно когда демо-маршрутизация реагирует так (из того, что я прочитал, она относительно нестабильна, поскольку еедля демонстрационных целей): 

Routing error: {message: "HTTP request failed: undefined", url: "https://router.project-osrm.org/route/v1/driving/8…erview=false&alternatives=true&steps=true&hints=;", status: -1, target: XMLHttpRequest}

Мне кажется, что ErrorBoundary не работает из документации:

https://reactjs.org/blog/2017/07/26/error-handling-in-react-16.html

Я думаю, что я подхожу к этому неправильно?

App.js 

import React, { Component } from "react";
import { Map, TileLayer } from "react-leaflet";
import Routing from "./RoutingMachine";
import ErrorBoundary from "./ErrorBoundary"

class App extends Component {
  state = {
    lat: 57.74,
    lng: 11.94,
    zoom: 13,
    isMapInit: false
  };
  saveMap = map => {
    this.map = map;
    this.setState({
      isMapInit: true
    });
  };

  render() {

    const position = [this.state.lat, this.state.lng];
    return (
      <Map center={position} zoom={this.state.zoom} ref={this.saveMap}>
        <TileLayer
          attribution='&amp;copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
          url="http://{s}.tile.osm.org/{z}/{x}/{y}.png"
        />
        {this.state.isMapInit && <ErrorBoundary><Routing map={this.map}/></ErrorBoundary>}
      </Map>
    );
  }
}

export default App;

RoutingMachine.js 

import { MapLayer } from "react-leaflet";
import L from "leaflet";
import "leaflet-routing-machine";
import { withLeaflet } from "react-leaflet";

class Routing extends MapLayer {
  createLeafletElement() {
    const { map } = this.props;
    let leafletElement = L.Routing.control({
      waypoints: [L.latLng(27.67, 85.316), L.latLng(27.68, 85.321)]
    }).addTo(map.leafletElement);
    return leafletElement.getPlan();
  }
}

export default withLeaflet(Routing);

ErrorBoundary.js 

import React, { Component } from 'react';

class ErrorBoundary extends Component {
    constructor(props) {
        super(props);
        this.state = { hasError: false };
      }

      componentDidCatch(error, info) {
        // Display fallback UI
        this.setState({ hasError: true });

      }

      render() {
        if (this.state.hasError) {
          // You can render any custom fallback UI
          return <h1>Something went wrong.</h1>;
        }
        return this.props.children;
      }
}

export default ErrorBoundary;
...