无法在尚未安装的组件上调用setState，这是一项禁忌措施，但可能表明您的应用程序中存在错误

Question

我正在尝试setState我的highchart选项。第二次单击，我试图再次更新。它不调用渲染或更新我的状态。

class HeatContainer extends Component {

state = {
    options: {
        axisColors: this.axisColors,
        credits: {
            enabled: false
        },
        chart: {
            height: 428
        },
        colorAxis: {
            minColor: this.axisColors.minColor,
            maxColor: this.axisColors.maxColor,
            labels: {
                style: this.style
            }
        },
        tooltip: {
            useHTML: true,
            padding: 2,
            headerFormat: '<div class="padding-0-10 padding-b-10"><table>',
            pointFormat: '<tr><td colspan="2"><h5><strong>{point.name}</strong></h5></td></tr>' +
                '<tr><td style="padding-right: 5px;">{point.type} Count: </td><td>{point.colorValue}</td></tr>' +
                '<tr><td style="padding-right: 5px;">Device Count: </td><td>{point.value}</td></tr>',
            footerFormat: '</table></div>'
        },
        plotOptions: {
            series: {
                cursor: 'pointer',
                dataLabels: {
                    formatter: function () {
                        var labelStr = this.point.name + ': ' + this.point.colorValue;
                        var allowedLength = (this.point.shapeArgs && this.point.shapeArgs.width) ? Math.round(this.point.shapeArgs.width / 8) : 0;
                        if (allowedLength && (labelStr.length > allowedLength)) {
                            var valueStr = this.point.colorValue + "";
                            var valueLength = valueStr.length;
                            var truncatedStrLength = (allowedLength - (valueLength + 3));
                            if (truncatedStrLength <= 0) {
                                labelStr = this.point.name.substr(0, 1);
                            } else {
                                labelStr = this.point.name.substr(0, truncatedStrLength) + '.. ' + this.point.colorValue;
                            }
                        }
                        return labelStr;
                    },
                    enabled: true,
                    allowOverlap: true,
                    style: {
                        fontFamily: "'univers', Arial, sans-serif",
                        fontSize: 12,
                        color: "#FFF",
                        stoke: "#FFF"
                    }
                },
                point: {
                    events: {
                        click: () => {
                            this.loadHierarchy({ chartType: 'momentaryDisturbance', name: this.name, previousLevel: this.previousLevel })
                        }
                    }
                }
            }
        },
        series: [{
            type: 'treemap',
            layoutAlgorithm: 'squarified',
            animation: false,
            allowDrillToNode: true,
            dataLabels: {
                enabled: false
            },
            levelIsConstant: false,
            levels: [{
                level: 1,
                dataLabels: {
                    enabled: true
                },
                borderWidth: 2
            }],
            data: []
        }],
        title: {
            text: ''
        }
    },
    params: { orgId: 1, range: 1, type: "momentary" }
}

loadHierarchy = (obj) => {
    this.setState({
        params: this.setParams(obj.name),
        options: {
            ...this.state.options,
            series: [
                {
                    ...this.state.options.series[0],
                    data: []
                }
            ]
        }
    }, this.updateChartOptions(this))
}

setParams(name) {
    let params = this.state.params;
    if(!("region" in params)) {
        params["region"] = name;
    } else if (!("substation" in params)) {
        params["substation"] = name;
    }

    return params;
}

updateChartOptions(classObj) {
    Services.getFaultData(classObj.state.params).then(res => {
        const renderObj = ProcessData(res, heatChartOptions.axisColors);
        classObj.setState({
            options: {
                ...classObj.state.options,
                series: [
                    {
                        ...classObj.state.options.series[0],
                        data: [...renderObj.chartData]
                    }
                ],
                colorAxis: {
                    ...classObj.state.options.colorAxis,
                    maxColor: renderObj.color
                }
            }
        })
    })
}

shouldComponentUpdate (prevState, nextState) {
    return (nextState.options.series[0].data && nextState.options.series[0].data.length > 0)
}

componentDidMount() {
    this.updateChartOptions(this)
}

render() {
    return (
        <HighchartsReact
            highcharts={Highcharts}
            options={this.state.options}
        />
    );
}
}

export default HeatContainer;

每次点击状态上方的代码更新highchart选项。我正在从服务和更新中获取数据。

页面加载后，我在componentDidMount（）上调用了同一服务，该服务设置了状态更新。但是第二次单击时，我正在使用具有相同结构的某些数据调用相同的服务，因此我试图更新其状态无效。

状态选项具有点击功能