highcharts-react-official rendering issue with React state

问题

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

'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;

回答1:

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.

Live example: https://stackblitz.com/edit/react-yctlyw?file=Chart.js

Best regards!

来源：https://stackoverflow.com/questions/50991826/highcharts-react-official-rendering-issue-with-react-state