Google Chart Component正在屏幕React js中重新呈现

Question

[我正在尝试使用来自API的数据创建GOOGLE CHART（PIE），但是，每次我设置日期范围时，它都会重新加载上一个（图表组件）呈现器+新的，因此我想知道如何修复代码以避免发生这种情况，只是重新渲染最后一个状态？

App.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; 

Answer 1

在ranges.preventDefault()方法中使用handleSelect。这将阻止浏览器重新加载。

handleSelect = (event) => {
event.preventDefault();
....

}

https://youtu.be/kdxB1JfTaZ4?t=277

欢呼声