highcharts-react-react 状态的官方渲染问题答案

【问题标题】：highcharts-react-official rendering issue with React statehighcharts-react-react 状态的官方渲染问题
【发布时间】：2018-12-02 03:52:00
【问题描述】：

我刚刚将highcharts-react-official (1.1.0) 实现为无状态的 React (16.0.0) 组件。

'chartData' 是使用父应用程序的状态呈现的，该状态可以根据报告而改变，但是当我的 HighchartsWrapper 组件正在呈现时，它似乎忽略了对 'chartData' 的更改并且没有呈现正确（最新）数据。其他作为道具传递的配置数据被应用（例如图表类型）当我console.log(props.chartData)时，我可以看到数据是正确的。未呈现的“chartData”更改通常是图表上系列数发生更改的更改。

我错过了什么吗？提前致谢。

import React from 'react'
import Highcharts from 'highcharts'
import HighchartsReact from 'highcharts-react-official'

const HighchartsWrapper = (props) => {
   console.log(props.chartData); // this is always correct

    let options = {
        title: { text: 'My chart' },
        series: props.chartData
    }

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

export default HighchartsWrapper;

【问题讨论】：

不应该是return而不是render吗？
@Colin 已编辑 - 谢谢。帖子的示例/简化代码中有一个错误，但我的真实组件使用了渲染。
我用你的组件做了一个活生生的例子，更新图表组件中的道具会更新图表 - 请参阅stackblitz.com/edit/react-9tajgc?file=index.js。您可以调整实时示例以显示问题吗？
这里是更新@morganfree - stackblitz.com/edit/react-eli4k8?file=index.js 尝试将新系列添加到图表时会出现此问题。此特定图表的数据来自各种网络设备，因此延迟会有所不同，结果也会在不同的时间出现。

标签： javascript reactjs highcharts

【解决方案1】：

此问题已由新的包装器版本修复。出现问题的原因是包装器中无法手动设置Chart.update() 函数的oneToOne 参数。现在您可以简单地将oneToOne={true} 设置为组件道具。然后它就可以正常工作了。

现场示例：https://stackblitz.com/edit/react-yctlyw?file=Chart.js

最好的问候！

【讨论】：

我们讨论的比较多，过几天就不用再设置oneToOne了，因为默认设置为true。