Javascript Highcharts在初始页面加载时不进行渲染

我有一个简单的React组件，它应该使用Highcharts React库呈现两个Highcharts。图表的数据来自父组件的状态，并作为道具传递给该组件。加载页面时，饼图为空（例如，只有一个没有序列的空圆圈）。如果我使用React元素检查器检查HighchartsReact元素，我可以看到选项属性中有正确的数据。此外，如果我手动更改inspector中的任何数据，图表会突然显示出来。我的猜测是，这与图表没有正确更新有关，但我不能确切地确定我做错了什么

const sharedPlotOptions = {
    chart: {
        plotBackgroundColor: null,
        plotBorderWidth: null,
        plotShadow: false,
        type: 'pie'
    },
    title: null,
    tooltip: {
        pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
    },
    plotOptions: {
        pie: {
            allowPointSelect: true,
            cursor: 'pointer',
            dataLabels: {
                enabled: true,
                format: '<b>{point.name}</b>: {point.percentage:.1f} %'
            }
        }
    },
    series: [{
        name: 'Countries',
        colorByPoint: true,
        data: []
    }]
}

export function CountryPopulationPlot(props) {
  let adultData = props.countries.map(country => ({
    name: country.name,
    y: country.population //TODO: use adult only data
  }))

  let allData = props.countries.map(country => ({
    name: country.name,
    y: country.population
  }))

  let adultPlotOptions = sharedPlotOptions
  adultPlotOptions.series[0].data = adultData

  let allPlotOptions = sharedPlotOptions
  allPlotOptions.series[0].data = allData

  return(
    <div>
      <HighchartsReact
        highcharts={Highcharts}
        options={adultPlotOptions}
        oneToOne={true}
      />
      <HighchartsReact
        highcharts={Highcharts}
        options={allPlotOptions}
      />
    </div>
  );
}

const sharedPlotOptions={
图表：{
plotBackgroundColor:null，
plotBorderWidth:null，
影子：错，
键入：“馅饼”
},
标题：空，
工具提示：{
pointFormat:“{series.name}:{point.percentage:.1f}%”
},
打印选项：{
馅饼：{
allowPointSelect:true，
光标：“指针”，
数据标签：{
启用：对，
格式：'{point.name}:{point.percentage:.1f}%'
}
}
},
系列：[{
名称：'国家'，
colorByPoint：对，
数据：[]
}]
}
导出函数CountryPopulationPlot（props）{
让adultData=props.countries.map（country=>({
名称：country.name，
y:country.population//TODO:仅使用成人数据
}))
让allData=props.countries.map（country=>({
名称：country.name，
y：国家人口
}))
让adultPlotOptions=sharedPlotOptions
adultPlotOptions.series[0]。数据=adultData
让allPlotOptions=sharedPlotOptions
allPlotOptions.series[0]。数据=allData
返回(
);
}

---

编辑：oneToOne道具试图修复该漏洞，但似乎没有任何效果。

在要呈现饼图的Highcharts中，成人数据和所有数据的格式应如下所示：

[
  {
    name: "USA",
    y: 1000
  },
  {
    name: "Italy",
    y: 500
  }
]

（或）

---

请在输入数据中再次检查此项。我在GitHub上写了一篇博客文章和一个工作应用程序，其中有一个简单的Highcharts饼图示例。请检查：

您是否能够在我可以使用的在线编辑器上复制您的案例？您可以使用此模板：

 [
  {
    "name": "USA",
    "y": 1000
  },
  {
    "name": "Italy",
    "y": 500
  }
]