带有React状态的highcharts-react-official渲染问题 [英] highcharts-react-official rendering issue with React state

问题描述

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

I've just implemented highcharts-react-official (1.1.0) as a stateless React (16.0.0) component.

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

'chartData' is rendered using the state of the parent App which can change depending on the report, but when my HighchartsWrapper componenet is rendering, it seems to ignore changes to 'chartData' and doesn't render the correct (latest) data. Other config data passed as props are applied (chart type for example) When I console.log(props.chartData), I can see that the data is correct. The 'chartData' changes that don't render are usually ones where the number of series on the graph change.

我错过了什么吗?预先感谢.

Am I missing something? Thanks in advance.

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;

推荐答案

新包装器版本已解决此问题.发生问题是因为包装器中没有可能手动设置Chart.update()函数的oneToOne参数.现在，您可以简单地将oneToOne={true}设置为组件道具.然后它可以正常工作.

This issue is fixed by new wrapper release. The problem occurs because there wasn't possibility in the wrapper to manually set the oneToOne parameter of Chart.update() function. Now you can simply set the oneToOne={true} as component props. Then it works correctly.

实时示例: https://stackblitz.com/edit/react- yctlyw?file = Chart.js

最诚挚的问候！

这篇关于带有React状态的highcharts-react-official渲染问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！