React - Wie rende ich die Ansicht neu, anstatt sie anzuhängen?

Question

Ich hole Daten von der API jedes Mal, wenn ein Benutzer auf einen anderen Zeitrahmen klickt. Ich versuche einige Tabellen und Grafiken basierend auf dem Zeitrahmen zu aktualisieren. Anstatt jedoch die aktuellen Graphen neu zu rendern und diese zu aktualisieren (oder zu löschen und zu lesen), hängt es an meiner Ansicht an.

Was kann ich tun, damit meine Ansicht erneut gerendert wird, anstatt sie anzuhängen?

Code:

import React from 'react'; 
import {LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend} from 'recharts'; 
import axios from 'axios'; 
import {Table, TableBody, TableHeader, TableHeaderColumn, TableRow, TableRowColumn} from 'chroma-fx/build/Table'; 
import Button from 'react-bootstrap/lib/Button'; 
import ButtonGroup from 'react-bootstrap/lib/ButtonGroup'; 

var array = [] 
var button_value = 1 

var StatisticsPage = React.createClass({ 
    getInitialState: function() { 
    return {info: "loading ... "}; 
    }, 
    componentDidMount: function() { 
    this.requestStatistics(button_value); 
    }, 
    render: function() { 
    var statisticsComponents = array.map(function(stat, i) { 
      var result = stat['Value'] 
      var heading = stat['Name'] 

      var state = { 
      showCheckboxes: false, 
      height: '300px', 
      width:'300px' 
      }; 
      return(); 
     }); 
    var buttonComponents = <ButtonGroup> 
     <Button onClick={() => this.onButtonClick(16)}>4 months</Button> 
     <Button onClick={() => this.onButtonClick(4)}>1 month</Button> 
     <Button onClick={() => this.onButtonClick(1)}>1 week</Button> 
    </ButtonGroup> 

    return <div>{buttonComponents}{statisticsComponents}</div>; 
    }, 
    onButtonClick: function(value){ 
    button_value = value 
    this.requestStatistics(button_value) 
    }, 
    requestStatistics:function(button_value){ 
     axios.post('api/2/statistics', button_value, { 
      headers: { 
       'Content-Type': 'application/json' 
      } 
     }) 
     .then(res => { 
     var values = res['data'] 
     for (var value in values){ 
      array.push({Name: value, Value: values[value] }) 
     } 
     this.setState(array) 
     }); 
    } 
    }) 

const View =() => (
    <div> 
    <h1>Reports</h1> 
    <StatisticsPage stations={array} /> 
    </div> 
); 
export default View; 

Answer 1

leeren Array zunächst in den Rückruf.

axios.post('api/2/statistics', button_value, { 
     headers: { 
      'Content-Type': 'application/json' 
     } 
    }) 
    .then(res => { 
    var array = [] 
    var values = res['data'] 
    for (var value in values){ 
     array.push({Name: value, Value: values[value] }) 
    } 
    this.setState(array) 
    }); 
}