Я новичок в reactJS. Я использую HighCharts Maps Api для загрузки картографических карт
Вот пример кода, который я написал,
import React from 'react';
import { withRouter } from 'react-router-dom'
import Highcharts from 'highcharts';
import HighchartsReact from 'highcharts-react-official';
import mapDataWorld from '@highcharts/map-collection/custom/world.geo.json';
import mapDataIndia from '@highcharts/map-collection/countries/in/in-all.geo.json';
import mapDataAustralia from '@highcharts/map-collection/countries/au/au-all.geo.json';
import mapDataUSA from '@highcharts/map-collection/countries/us/us-all.geo.json';
import { Button } from 'antd';
require('highcharts/modules/map')(Highcharts);
class MapChartWidget extends React.Component {
state={
backWorldButtonDisable:true,
options : {
title: {
text: ''
},
colorAxis: {
min: 0,
stops: [[0.4, '#ffff00'], [0.65, '#bfff00'], [1, ' #40ff00']]
},
plotOptions: {
series: {
point: {
events: {
click: (e)=>{this.mapDataChange(e)}
}
}
},
mapline: {
showInLegend: false,
enableMouseTracking: false
}
},
series: [
{
mapData:mapDataWorld,
data: [['in',5],['au',10],['us',97]],
states: {
hover: {
color: '#BADA55'
}
},
dataLabels: {
enabled: true,
format: '{point.name}'
}
}
],
},
}
mapDataChange(value){
if(value.point.name === "India"){
this.setState({
backWorldButtonDisable:false,
options : {
title: {
text: ''
},
colorAxis: {
min: 0,
stops: [[0.4, '#ffff00'], [0.65, '#bfff00'], [1, ' #40ff00']]
},
series: [
{
mapData:mapDataIndia,
data: [['in',5],['au',10],['us',97]],
states: {
hover: {
color: '#BADA55'
}
},
dataLabels: {
enabled: true,
format: '{point.name}'
}
}
],
},
})
}
}
render() {
return (
<React.Fragment>
<Button onClick={this.onBacktoMapClick.bind(this)} size="small">Back to World Map</Button>
<HighchartsReact callback={this.props.chartRefCallback} containerProps={{ style: { width: '100%', height: 'calc(100% - 50px)' } }} options={this.state.options} constructorType={'mapChart'} highcharts={Highcharts} />
</React.Fragment>
);
}
}
export default withRouter(MapChartWidget);
Выходное изображение: карта мира загружается. 
При двойном щелчке по Индии отображается карта Индии. (Я не знаю, почему он не может быть загружен в один клик) 
На India Карта, я буду передавать значения для данных, как это data: [ ['in-py', 3],['in-ld', 2]] , Но когда я передаю эти значения в коде, карта Индии не загружается.
Ошибка, которую я получил: 
После щелчка по Индии загружается карта мира без данных 
Но когда я передаю эти значения data: [['in',5],['au',10],['us',97]] внутри параметра данных в функции mapDataChange, карта Индии загружается как первый набор выходных изображений. Поскольку значения указаны для карты страны, она не может быть отображена на карте Индии.
В приведенном выше коде в параметрах есть параметр для карты карты. В Initial я загружаю карту мира с данными. Позже, когда пользователь нажмет на Индию, будет вызван mapDataChange. В этой функции я сбрасываю параметры в reactJS Карта состояния Индии со значениями, которые необходимо загрузить. В этой функции, если я передам значения для данных, например data: [ ['in-py', 3],['in-ld', 2]], после обновления sh моей страницы, при нажатии на Индию на карте мира карта Индии не загружается, карта мира все еще там. Если я передам эти значения data: [['in',5],['au',10],['us',97]], после обновления sh моей страницы, при нажатии на Индию на карте мира карта Индии будет загружена. Поскольку значения указаны для карты страны, она не может быть отображена на карте Индии. Я не знаю, как решить эту проблему. Пожалуйста, помогите мне решить эту проблему. Я хочу, чтобы эти значения data: [ ['in-py', 3],['in-ld', 2]] были показаны на карте Индии