Javascript 反应-如何强制重新加载类组件？

我需要重新加载谷歌地图点击功能。我已经点击了这个事件，它将从API获取数据，这些数据将重新加载到谷歌地图中

这是我的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

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;

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;

import React，{Component}来自'React'；
从“/Gmap”导入地图；
从“../common/MapHelpBar”导入MapHelpBar；
从“/StationList”导入StationList；
从“../../api/StationApi”导入{getStations}；
从“../../utils/Constants”导入常量；
类仪表板扩展组件{
建造师（道具）{
超级（道具）；
此.state={
车站：[]，
标记类：“”，
};
}
componentDidMount（）{
getStations（）。然后（res=>res）。然后（result=>{
如果（结果）{
this.setState（{stations:result}）；
}
});
}
callStation=async（数据，点击索引）=>{
getStations（）。然后（res=>res）。然后（response=>{
设stationArr=[]；
for（设i=0；i{
如果（数据===status.status）{
返回true；
}
});
如果（状态充电===真）{
平稳推送（响应[i]）；
}
}
if（数据===常数.stationStatus.faulted）{
const statusFaulated=响应[i]。连接器。某些（（状态）=>{
如果（数据===status.status | | Constants.stationStatus.damaged===status.status）{
返回true；
}
});
如果（statusFaulated==真）{
平稳推送（响应[i]）；
}
}
if（数据===常数.stationStatus.ok）{
const statusOk=响应[i]。连接器。一些（（状态）=>{
如果（数据===status.status
||Constants.stationStatus.available==status.status
||Constants.stationStatus.preparing==status.status）{
返回true；
}
});
如果（状态OK==真）{
平稳推送（响应[i]）；
}
}
}
this.setState（{stations:stationArr}）；
if（this.state.markerClass===clickedIndex）{
this.setState（{markerClass:0}）；
//设定值（响应）；
}否则{
this.setState（{markerClass:clickedIndex}）；
//设置站（stationArr）；
}
});
}
渲染（）{
返回(
{
this.state.stations.length>0？：null
}
{
}
)
}
}
导出默认仪表板

在Dashboard.js中，单击时会重新加载StationList（StationList.js）

但是Map（Gmap.js）并没有重新加载

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

{
this.state.stations.length>0？：null
}

这是我的Gmap.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

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;

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;

import React，{Component}来自“React”；
从“../../Config/Config”导入*作为配置；
从“./stations/StationGoogleMap”导入StationGoogleMap；
类Gmap扩展了组件{
建造师（道具）{
超级（道具）；
此.state={
车站：[]，
selectedMarker:false，
infoWindow：没错，
};
}
componentDidMount（）{
this.setState（{stations:this.props.stations}）；
}
handleClick=（标记，信息窗口）=>{
this.setState（{selectedMarker:marker}）；
this.setState（{infoWindow:infoWindow}）；
};
render（）{
常量googleMapURL=`https://maps.googleapis.com/maps/api/js?v=3.exp&key=${process.env.REACT\u APP\u MAP\u KEY}&libraries=几何体、图形、位置`；
设mapBlock=null；
让markers=this.state.stations；
让latitude=Config.MAP\u Config.default\u location.latitude；
让longitude=Config.MAP\u Config.default\u location.longitude；
设defaultZoom=8；
让isStationDetailPage=false；
if（this.props.id）{
isStationDetailPage=true；
}
如果（markers.length==1）{
纬度=
标记[0]。站点纬度！==null
？标记[0]。站点纬度
：纬度；
经度=
标记[0]。桩号经度！==null
？标记[0]。站点经度
：经度；
默认缩放=12；
}
如果（this.state.stations.length>0）{
映射块=(
);
}
返回图块；
}
}
Gmap.defaultProps={
id:“”，
电台：[]
}
导出默认Gmap；

这是我的地图帮助栏.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

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;

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;

从“React”导入React；
从“../../utils/Constants”导入常量；
从“../../../Translations.json”导入翻译；
功能映射帮助栏（道具）{
返回(
{Translations.map.help.stations.display_label}
:
道具。点击（Translations.map.help.stations.status\u list.charging，1）}>
{Translations.map.help.stations.status_list.charging}
props.clicked（Translations.map.help.stations.status_list.faulted，2）}>
{Translations.map.help.stations.status_list.faulted}
props.clicked（Translations.map.help.stations.status_list.ok，3）}>
{Translations.map.help.stations.status_list.ok}
{Translations.map.help.connectors.display_label}
:
{Translations.map.help.connectors.status_list.available}
{Translations.map.help.connectors.status_list.faulted}
);
}
导出默认地图帮助栏；

有人能帮我拿一个手提包吗