Question

在setState中用componentDidMount更改状态时，为什么不重新渲染Chart组件？

我想从数据库中获取数据，并在加载数据后呈现图表。而是使用空数据呈现图表，并且不显示数据库中的数据。

    changeJoystick = () => {
        this.setState({robustActive: !this.state.robustActive, compactActive: !this.state.compactActive});
    };

    async fetchHeatMapData() {
        let robustData = [];
        let compactData = [];
        try {
            let response = await getDoubleAxisSegmentAverage();
            robustData = response.data;
            let {seriesRobust} = this.state;
            robustData = robustData.slice(1, 37);
            for (let i = 0; i < 6; i++) {
                seriesRobust[i].data = robustData.slice(6 * i, 6 * (i + 1));
            }
            return seriesRobust;
        } catch (err) {
            console.log(err);
        }
    }

    componentDidMount() {
        this.fetchHeatMapData()
            .then(seriesRobust => {
                    this.setState({seriesRobust});
                    console.log(this.state.seriesRobust);
                }
            )
    }

    render() {
        let robust_variant = this.state.robustActive ? 'contained' : 'outlined';
        let compact_variant = this.state.compactActive ? 'contained' : 'outlined';

        return (
            <Fragment>
                <Grid container direction='row' justify='flex-start'>
                    <Grid item>
                        <Button variant={robust_variant} color='secondary' onClick={this.changeJoystick.bind(this)}>Robust
                            Joystick</Button>
                    </Grid>
                    <Grid item>
                        <Button variant={compact_variant} color='secondary'
                                onClick={this.changeJoystick.bind(this)}>Compact
                            Joystick</Button>
                    </Grid>
                </Grid>
                <br/>
                <Grid container justify='space-evenly'>
                    <Grid item>
                        <Chart
                            options={this.state.options}
                            series={this.state.robustActive ? this.state.seriesRobust : 
                             this.state.seriesCompact}
                            type='heatmap'
                            width={1000}
                            height={1000}/>
                    </Grid>
                </Grid>
</Fragment>

Answer 1

componentDidMount() {
    this.fetchHeatMapData()
        .then(seriesRobust => {
                this.setState({seriesRobust});
                console.log(this.state.seriesRobust);
            }
        )
}

在setState调用之后，您不应期望更新后的状态值！ 'setState not rerendered'个问题的市长性与此有关。

您只能做

componentDidMount() {
    this.fetchHeatMapData()
}

和setState()中的fetchHeatMapData()而不是返回

        let {seriesRobust} = this.state;

此代码对对象使用相同的ref，足以

        const seriesRobust = [...this.state.seriesRobust]

this.state.seriesRobust几乎没有在渲染中使用，它是有条件使用的（仅当robustActive为true时）

series = {this.state.robustActive？ this.state.seriesRobust：

Answer 2

我这样更改了代码：

componentDidMount() {
            this.fetchHeatMapData().then(() => this.forceUpdate());
    }

在fetchHeatMapData()函数中，我将状态设置为 this.setState({seriesRobust});

获取数据后，我正在forceUpdate中执行componentDidMount()，现在它已按预期工作。

我知道您通常应该避免使用forceUpdate()，但这是我目前能想到的唯一解决方案。

在componentDidMount中更改状态时，为什么不重新渲染组件？

2 个答案: