javascript - React - 如何强制重新加载类组件？

Question

我需要在点击功能时重新加载 Google map 。我有点击事件，它将从 API 获取数据，并且该数据应该重新加载到 Google map 中。

这是我的Dashboard.js

import React, { Component } from 'react';
import Map from './Gmap';
import MapHelpBar from '../common/MapHelpBar';
import StationList from './StationList';
import { getStations } from '../../api/StationApi';
import Constants from '../../utils/constants';

class Dashboard extends Component {
  constructor(props) {
    super(props);
    this.state = {
      stations: [],
      markerClass: '',
    };
  }

  componentDidMount() {
    getStations().then(res => res).then(result => {
      if (result) {
        this.setState({ stations: result});
      }
    });
  }

  callStation = async (data, clickedIndex) => {
    getStations().then(res => res).then(response => {
      let stationArr = [];
      for (let i = 0; i < response.length; i++) {
        if (data === Constants.stationStatus.charging) {
          const statusCharging = response[i].connectors.every((status) => {
            if (data === status.status) {
              return true;
            }
          });
          if (statusCharging === true) {
            stationArr.push(response[i]);
          }
        }

        if (data === Constants.stationStatus.faulted) {
          const statusFaulated = response[i].connectors.some((status) => {
            if (data === status.status || Constants.stationStatus.damaged === status.status) {
              return true;
            }
          });
          if (statusFaulated === true) {
            stationArr.push(response[i]);
          }
        }

        if (data === Constants.stationStatus.ok) {
          const statusOk = response[i].connectors.some((status) => {
            if (data === status.status
                || Constants.stationStatus.available === status.status
                || Constants.stationStatus.preparing === status.status) {
              return true;
            }
          });
          if (statusOk === true) {
            stationArr.push(response[i]);
          }
        }
      }

      this.setState({ stations: stationArr});

      if (this.state.markerClass === clickedIndex) {
        this.setState({markerClass: 0});
        // setStations(response);
      } else {
        this.setState({markerClass: clickedIndex});
        // setStations(stationArr);
      }
    });
  }

  render () {
    return(
    <div>
      <div className="row">
        <div className="col-md-12 col-lg-12">
          <section className="panel">
            <div className="panel-body">
              <div className="row">
                <div className="col-lg-12">
                  {
                    this.state.stations.length > 0 ? <Map stations={this.state.stations} /> : null
                  }
                </div>
                <MapHelpBar clicked={this.callStation} clickedClassIndex={this.state.markerClass} />
              </div>
            </div>
          </section>
        </div>
      </div>
      {
        <StationList stations={this.state.stations} />
      }
  </div>
    )
  }
}

export default Dashboard

在 Dashboard.js 中，StationList (StationList.js) 在点击时重新加载

<StationList stations={this.state.stations} />

但是 map (Gmap.js)没有重新加载

<div className="col-lg-12">
 {
      this.state.stations.length > 0 ? <Map stations={this.state.stations} /> : null
 }
</div>

这是我的Gmap.js

import React, { Component } from "react";
import * as Config from "../../config/Config";
import StationGoogleMap from "../stations/StationGoogleMap";

class Gmap extends Component {
  constructor(props) {
    super(props);
    this.state = {
      stations: [],
      selectedMarker: false,
      infoWindow: true,
    };
  }

  componentDidMount() {
    this.setState({ stations: this.props.stations });
  }
  handleClick = (marker, infoWindow) => {
    this.setState({ selectedMarker: marker });
    this.setState({ infoWindow: infoWindow });
  };

  render() {
    const googleMapURL = `https://maps.googleapis.com/maps/api/js?v=3.exp&key=${process.env.REACT_APP_MAP_KEY}&libraries=geometry,drawing,places`;
    let mapBlock = null;

    let markers = this.state.stations;
    let latitude = Config.MAP_CONFIG.default_location.latitude;
    let longitude = Config.MAP_CONFIG.default_location.longitude;
    let defaultZoom = 8;

    let isStationDetailPage = false;

    if (this.props.id) {
      isStationDetailPage = true;
    }

    if (markers.length === 1) {
      latitude =
        markers[0].station_latitude !== null
          ? markers[0].station_latitude
          : latitude;
      longitude =
        markers[0].station_longitude !== null
          ? markers[0].station_longitude
          : longitude;
      defaultZoom = 12;
    }

    if (this.state.stations.length > 0) {
      mapBlock = (
        <StationGoogleMap
          selectedMarker={this.state.selectedMarker}
          markers={markers}
          onClick={this.handleClick}
          googleMapURL={googleMapURL}
          loadingElement={<div style={{ height: `100%` }} />}
          containerElement={<div style={{ height: `400px` }} />}
          mapElement={<div style={{ height: `100%` }} />}
          // latitude={-34.617874}
          // longitude={-58.368587}
          latitude={latitude}
          longitude={longitude}
          defaultZoom={defaultZoom}
          infoWindow={this.state.infoWindow}
          isStationDetailPage={isStationDetailPage}
        />
      );
    }
    return mapBlock;
  }
}

Gmap.defaultProps = {
  id: '',
  stations:[]
}

export default Gmap;

这是我的 MapHelpBar.js

import React from 'react';
import Constants from '../../utils/constants';
import Translations from '../../../translations.json';

function MapHelpBar(props) {
  return (
    <>
      <div className="col-lg-12">
        <div className="stations-map">
          <div className="flex-container">
            <div className="stations-details">
              {Translations.map.help.stations.display_label}
              :
            </div>
            <div className={props.clickedClassIndex === 1 ? 'stations-details active' : 'stations-details'} onClick={() => props.clicked(Translations.map.help.stations.status_list.charging, 1)}>
              <img src={`/img/${Constants.stationIcons.green}`} alt={Translations.station_detail.station_icons.green_icon} />
              {Translations.map.help.stations.status_list.charging}
            </div>
            <div className={props.clickedClassIndex === 2 ? 'stations-details active' : 'stations-details'} onClick={() => props.clicked(Translations.map.help.stations.status_list.faulted, 2)}>
              <img src={`/img/${Constants.stationIcons.red}`} alt={Translations.station_detail.station_icons.red_icon} />
              {Translations.map.help.stations.status_list.faulted}
            </div>
            <div className={props.clickedClassIndex === 3 ? 'stations-details active' : 'stations-details'} onClick={() => props.clicked(Translations.map.help.stations.status_list.ok, 3)}>
              <img src={`/img/${Constants.stationIcons.blue}`} alt={Translations.station_detail.station_icons.blue_icon} />
              {Translations.map.help.stations.status_list.ok}
            </div>
          </div>
        </div>
      </div>
      <div className="col-lg-12">
        <div className="stations-map">
          <div className="flex-container">
            <div className="stations-details">
              {Translations.map.help.connectors.display_label}
              :
            </div>
            <div className="stations-details">
              <span className="box-available" />
              {Translations.map.help.connectors.status_list.available}
            </div>
            <div className="stations-details">
              <span className="box-faulted" />
              {Translations.map.help.connectors.status_list.faulted}
            </div>
          </div>
        </div>
      </div>
    </>
  );
}

export default MapHelpBar;

谁能帮我解决这个问题？

Answer 1

您缺少 shouldComponentUpdate()

引用本页React documentation