绘制地图时 Highcharts 错误编号 17

Question

我是使用 Highcharts 创建地图的新手。在这种情况下，我有包含*村庄名称、纬度、经度、作物产量差异和预测实践的数据。我的意图是当用户在selectbox上选择village name时，使用经纬度数据的标记应该出现在地图上以显示村庄的位置，此时也显示预测练习.

我已经写了我的代码，但每次我从选择框中选择village name时都会出现此错误

2react-dom.development.js:22839 Uncaught Error: Highcharts error #17: www.highcharts.com/errors/17
    at c.Chart.e (highcharts.src.js:462:1)
    at c.fireEvent (highcharts.src.js:2407:1)
    at c.error (highcharts.src.js:470:1)
    at c.Chart.initSeries (highcharts.src.js:23590:1)
    at highcharts.src.js:25127:1
    at Array.forEach (<anonymous>)
    at c.Chart.firstRender (highcharts.src.js:25124:1)
    at c.Chart.<anonymous> (highcharts.src.js:23572:1)
    at c.fireEvent (highcharts.src.js:2407:1)
    at c.Chart.init (highcharts.src.js:23446:1)
2react-dom.development.js:18687 The above error occurred in the <ForwardRef> component:

    at http://localhost:3000/static/js/bundle.js:6112:33
    at MapChart (http://localhost:3000/static/js/bundle.js:132:5)
    at div
    at div
    at VillagePredictions (http://localhost:3000/static/js/bundle.js:166:96)
    at div
    at App

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
logCapturedError @ react-dom.development.js:18687
react-dom.development.js:12056 Uncaught Error: Highcharts error #17: www.highcharts.com/errors/17
    at c.Chart.e (highcharts.src.js:462:1)
    at c.fireEvent (highcharts.src.js:2407:1)
    at c.error (highcharts.src.js:470:1)
    at c.Chart.initSeries (highcharts.src.js:23590:1)
    at highcharts.src.js:25127:1
    at Array.forEach (<anonymous>)
    at c.Chart.firstRender (highcharts.src.js:25124:1)
    at c.Chart.<anonymous> (highcharts.src.js:23572:1)
    at c.fireEvent (highcharts.src.js:2407:1)
    at c.Chart.init (highcharts.src.js:23446:1)

作为 Highcharts 的新手，我已经搜索了解决方案，但还没有弄清楚。

这是应该工作的代码

import React, { useState, useEffect } from 'react';
import Select from 'react-select';
import Highcharts from 'highcharts';
import HighchartsReact from 'highcharts-react-official';
import axios from 'axios';


const MapChart = ({ lat, lon }) => {
  const options = {
    chart: {
      map: 'countries/tz/tz-all',
    },
    title: {
      text: 'Tanzania Map',
    },
    series: [
      {
        name: 'Villages',
        type: 'mapbubble',
        data: [
          {
            name: 'Selected Village',
            z: 1,
            lat: lat,
            lon: lon,
          },
        ],
        maxSize: '12%',
      },
    ],
  };

  return <HighchartsReact highcharts={Highcharts} options={options} />;
};

const VillagePredictions = () => {
  const [selectedVillage, setSelectedVillage] = useState(null);
  const [villages, setVillages] = useState([]);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    setLoading(true);
    axios
      .get('village_pred/')
      .then(response => {
        setVillages(response.data.data);
        setLoading(false);
      })
      .catch(error => {
        console.log(error);
        setLoading(false);
      });
  }, []);

  const options = villages.map(village => ({
    value: village.name,
    label: village.name,
  }));

  const handleVillageChange = selectedOption => {
    setSelectedVillage(selectedOption);
  };

  const selectedVillageData =
    selectedVillage !== null
      ? villages.find(village => village.name === selectedVillage.value)
      : null;
console.log(selectedVillageData)

  return (
    <div>
      <h2>Village Predictions</h2>
      <div style={{ width: '200px', marginBottom: '20px' }}>
        <Select
          value={selectedVillage}
          onChange={handleVillageChange}
          options={options}
        />
      </div>
      {loading && <p>Loading...</p>}
      {!loading && selectedVillageData && (
        <div>
          <p>Selected Village: {selectedVillage.label}</p>
          <MapChart
            lat={selectedVillageData.latitude}
            lon={selectedVillageData.longitude}
          />
          <p>Crop Yield Difference: {selectedVillageData.crop_yield_difference}</p>
          <p>Predicted Farm Practice: {selectedVillageData.predicted_practice}</p>
        </div>
      )}
    </div>
  );
};

export default VillagePredictions;

现在当我在控制台上打印我的数据时，这是单个村庄的数据的样子

altitude : 1591.4000244140625
crop_yield_difference: 0.4101111111111102
latitude : -4.2583160400390625
longitude: 35.52566146850586
name: "Seloto"
predicted_practice: "fertilizer"

最后我的 React 版本是 "react": "^18.2.0"，highcharts 是 "highcharts": "^7.2.0",

不幸的是，我无法重现此内容以用作示例，但是任何有此经验的人都可以提供帮助，这将真正挽救我的一天。谢谢