我正在尝试使用来自 API 的数据创建一个 GOOGLE CHART (PIE)，但是每次我设置日期范围时，它都会重新加载最后一个（图表组件）渲染 + 新的，所以我想知道如何修复代码以避免它发生并重新渲染最后一个状态？
应用程序.js
render() {
return(
<div className="App">
<DateRangerPicker/>
<ChartPie chartData={this.state.chartData}/>
</div>
)}DateRangerPicker.js
import App from './App';
class DateRangerPicker extends React.Component {
constructor(props) {
super(props);
this.state = {
startDate: null,
endDate: null,
reload: false
};
}
handleSelect = ranges => {
let startDate = ranges.selection.startDate;
let endDate = ranges.selection.endDate;
this.setState({
startDate: ranges.selection.startDate = new Date(startDate.getTime() - (startDate.getTimezoneOffset() * 60000 ))
.toISOString()
.split("T")[0],
endDate: ranges.selection.endDate = new Date(endDate.getTime() - (endDate.getTimezoneOffset() * 60000 ))
.toISOString()
.split("T")[0],
reload: true,
chartData: []
});
console.log('state_startDate: '+ this.state.startDate+ 'state_endDate: '+this.state.endDate);
}
render(){
const selectionRange = {
startDate: new Date(),
endDate: new Date(),
key: 'selection',
}
if(this.state.startDate)
return(
<div className="App">
<App
reload={this.state.reload}
startDate={this.state.startDate}
endDate={this.state.endDate}
/>
</div>
)
return (
<div className="App">
<DateRangePicker
ranges={[selectionRange]}
onChange={this.handleSelect}
/>
</div>
)
}
}
export default DateRangerPicker;ChartPie.js
import React from 'react';
import { Chart } from "react-google-charts";
class ChartPie extends React.Component {
constructor(props) {
super(props);
this.state = {
chartData: this.props.charData,
reload: false
};
}
componentDidMount() {
this.setState({
chartData: this.props.charData
});
}
render(){
if(this.state.reload)
return
return (
<div className="App">
<Chart
width={'600px'}
height={'300px'}
chartType="PieChart"
loader={<div>Loading Chart</div>}
data={this.props.chartData}
options={{
title: 'Work In Progress',
// Just add this option
is3D: true,
}}
rootProps={{ 'data-testid': '2' }}
/>
</div>
)}
}
export default ChartPie;