收到新道具时，海图坠毁

问题描述

我正在使用Highcharts创建以下图形：

青色的中线是X轴，“ I”形光标由3个Lineseries分量组成。

下面是render()上的一些代码。为了简化起见，我删除了参数的计算，但是我验证了所有data，min，max等参数在渲染时都不为空。

const plotOptions = {
    series: {
        enableMouseTracking: false,animation: false,marker: {
            states: {
                hover: {
                    enabled: false
                }
            }
        },},area: {
        softThreshold: true,spline: {
        animation: false,line: {
        animation: false,}
}

return (

  <div className="app">
<HighchartsChart plotOptions={plotOptions}>
  <Chart
    backgroundColor='#FFFFFF'
    marginTop={margin_top}/>

  <XAxis
    gridlinewidth={0}
    linewidth={0}
    minorTickLength={0}
    tickLength={0}
    min={scale['min'] - 5}
    max={scale['max'] + 5}
    labels={x_labels}
  />
  
  <YAxis  id="number" gridlinewidth={0} min={-205} max={205} labels='None'>
    <Lineseries
      id="x_axis"
      data={[{x: scale['min'],y: 0},{x: scale['max'],y: 0}]}
      color='#00abff'
      linewidth={3}
      marker='None'
    />
    <Lineseries
      id="cursor"
      data={ci_cursor}
      color='#0f41d7'
      linewidth={4}
    />

    <Lineseries
      id="cursor_top"
      data={ci_cursor_top}
      color='#0f41d7'
      linewidth={4}
      marker='None'
      
    />

    <Lineseries
      id="cursor_bottom"
      data={ci_cursor_bottom}
      color='#0f41d7'
      linewidth={4}
      marker='None'
      dataLabels={{
        'enabled': true,'formatter': function() {
           return 'lower value: ' + range_min;
         },'style': label_style,'y': 30,'x': this.label_x_offset() - 10,'align': 'left'
      }}
    />

    <Lineseries
      id="upper_straight"
      data={upper_straight_data}
      color='#000028'
      linewidth={2}
      marker='None'
    />
   
   <Lineseries
      id="upper_straight"
      data={upper_straight_data}
      color='#000028'
      linewidth={2}
      marker='None'
    />

    <Splineseries
      id="ci_upper"
      name="ci_upper"
      data={upper_graph_data}
      color='#0f41d7'
      marker='None'
    />

    <Lineseries
      id="lower_straight"
      data={lower_straight_data}
      color='#0f41d7'
      linewidth={2}
      marker='None'
    />

    <Splineseries
      id="ci_lower"
      name="ci_lower"
      data={lower_graph_data}
      color='#0f41d7'
      marker='None'
    />

  </YAxis>
</HighchartsChart>

）;

页面上有一些控制此图的滑块。当道具改变时，会发生以下错误：

highcharts.src.js:35561 Uncaught TypeError: Cannot use 'in' operator to search for 'symbol' in None
at e.update (highcharts.src.js:35561)
at Series.js:117
at commitHookEffectListMount (react-dom.development.js:19731)
at commitPassiveHookEffects (react-dom.development.js:19769)
at HTMLUnkNownElement.callCallback (react-dom.development.js:188)
at Object.invokeGuardedCallbackDev (react-dom.development.js:237)
at invokeGuardedCallback (react-dom.development.js:292)
at flushPassiveEffectsImpl (react-dom.development.js:22853)
at unstable_runWithPriority (scheduler.development.js:653)
at runWithPriority$1 (react-dom.development.js:11039)
at flushPassiveEffects (react-dom.development.js:22820)
at performSyncWorkOnRoot (react-dom.development.js:21737)
at react-dom.development.js:11089
at unstable_runWithPriority (scheduler.development.js:653)
at runWithPriority$1 (react-dom.development.js:11039)
at flushSyncCallbackQueueImpl (react-dom.development.js:11084)
at flushSyncCallbackQueue (react-dom.development.js:11072)
at Object.batchedUpdates$1 [as unstable_batchedUpdates] (react-dom.development.js:21862)
at HTMLDocument.run (addEventListener.js:5)

上述Series.js中的行是这样的：

var modifiedProps = getModifiedProps(prevProps,rest);

if (modifiedProps !== false) {
>  series.update(modifiedProps,false);
  doRedraw = true;
}

引起麻烦的特定Lineseries是底部光标（水平线）：

 <Lineseries
      id="cursor_bottom"
      data={ci_cursor_bottom}
      color='#0f41d7'
      linewidth={4}
      marker='None'
      dataLabels={{
        'enabled': true,'align': 'left'
      }}
    />

为什么会这样？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）