React.js的setState页面加载不工作，如何修复

Question

我使用react-apexcharts来创建一个piechart。我很成功地渲染了series=[]，因为它是原生的apexcharts组件。

但我也试图渲染标签，这是一个简单的数组。

如果运行console.log:

console.log(this.props.total.map(a=>a.name))

渲染

["label 1","label 2","label 3"]

如何用this.props.total.map(a=>a.name)的值更新label: [],?

完整代码在

下面

import React from 'react'
import { Card, CardHeader} from 'reactstrap'
import Chart from 'react-apexcharts'
class PieChart extends React.Component {
constructor(props) {
super(props);
this.state = {    
series: [],
options: {
chart: {
width: 380,
type: 'pie',
},
labels: [],
theme: {
mode: 'light', 
palette: 'palette2', 
},
legend: {
show: true,
position: 'bottom',
horizontalAlign: 'center', 
floating: false,
}

},
};
}

componentDidMount() {
this.setState({
label: this.props.total.map(a=>a.name),
})
}

render() {
return (
<>
<Card  color="gray" className="mb-3">
<CardHeader className="bg-gray-lighter">PieChart</CardHeader>
<Card body>
<div id="chart3">
<Chart 
options={this.state.options} 
series={this.props.total.map(a=>a.total_today_brl)} 
type="pie" 
height={450} 
/>
</div>
</Card>
</Card>
</>
);
}
}
export default PieChart;

I tried without success:

<Chart 
options={this.state.options} 
series={this.props.total.map(a=>a.total_today_brl)} 
labels={this.props.total.map(a=>a.name)}
type="pie" 
height={450} 
/>

And try also:

options: {
chart: {
width: 380,
type: 'pie',
},
labels: this.props.total.map(a=>a.name),
theme: {
mode: 'light', 
palette: 'palette2', 
},

Answer 1

labels在options之下

所以为了更新状态的标签，你需要执行

this.setState((prevState)=> ({
...prevState,
options:{ ...prevState.options,
labels: this.props.total.map(a=>a.name)
}
}))