React setState() Status nicht aktualisieren, wenn die Schaltfläche geklickt

Question

Ich bin neu zu Reagieren und versuchen, einige Diagrammkomponenten mit react-chartjs-2 zu testen. Ich habe zwei Testdatenobjekte, zwischen denen ich wechseln möchte, wenn ich eine Aktualisierungsschaltfläche drücke.

Eine Hauptkomponente App wurde eingerichtet, um die Komponenten Bar (von react-chartjs-2) und Button zu verarbeiten. state verweist auf das Datenobjekt, das für Bar verwendet werden soll, und eine Variable updated wird verwendet, um zu bestimmen, welche Daten in der handleUpdate()-Methode angezeigt werden sollen.

Wenn die Button geklickt wird es die handleUpdate() Methode in App nennen sollte, die in Requisiten für onClick als Referenz übergeben wird nach unten. Die Methode wertet updated aus und verwendet setState(), um die verwendeten Daten zu ändern. Ich verwende den Rückruf von setState(), um den Status zu protokollieren und den Wert updated zu ändern.

import React from 'react'; 
    import ReactDOM from 'react-dom'; 
    import { Bar } from 'react-chartjs-2'; 

    const chart1 = { 
     labels: ['Team1', 'Team2', 'Team3', 'Team4', 'Team5'], 
     datasets: [{ 
     label: 'Team points', 
     data: [503, 385, 270, 133, 65], 
     backgroundColor: [ 
      '#4DB6AC', 
      '#E57373', 
      '#7986CB', 
      '#F06292', 
      '#E0E0E0' 
     ] 
     }] 
    }; 

    const chart2 = { 
     labels: ['Team1', 'Team2', 'Team3', 'Team4', 'Team5'], 
     datasets: [{ 
     label: 'Team points 2', 
     data: [303, 185, 470, 313, 65], 
     backgroundColor: [ 
      '#4DB6AC', 
      '#E57373', 
      '#7986CB', 
      '#F06292', 
      '#E0E0E0' 
     ] 
     }] 
    }; 

    class App extends React.Component { 
     constructor(props) { 
     super(props); 

     this.handleUpdate = this.handleUpdate.bind(this); 

     this.updated = false; 

     this.state = { 
      chartData: chart1 
     } 

     console.log(this.state.chartData); 
     console.log(this.updated); 
     } 

     // Toggle between chart1 and chart2 based on value of updated 
     handleUpdate() { 

     if (!this.updated) { 
      this.setState({ 
      chartData: chart2 
      },() => { 
      console.log(this.state.chartData); 
      this.updated = true; 
      }); 
     } 
     else { 
      this.setState({ 
      chartData: chart1 
      },() => { 
      console.log(this.state.chartData); 
      this.updated = false; 
      }); 
     } 
     } 

     render() { 
     return(
      <div> 
      <Bar data={this.state.chartData} width={650} height={400} /> 
      <Button handleOnClick={this.handleUpdate} /> 
      </div> 
     ); 
     } 
    } 

    const Button = (props) => (
     <button id="update-chart" onClick={props.handleOnClick}>Update</button> 
    ); 

    ReactDOM.render(
     <App />, 
     document.getElementById('chart-container') 
    ); 

Das erste Mal, wenn die Schaltfläche geklickt wird alles wie vorgesehen funktioniert, wird der Zustand aktualisiert und die Komponente neu macht die neuen Daten anzuzeigen. Bei nachfolgenden Klicks bleibt der Status jedoch unverändert und das Diagramm verweist weiterhin auf dieselben Daten.

console output - das erste Objekt ist das anfängliche Rendern, die folgenden zwei werden nach dem Klicken auf die Schaltfläche protokolliert. Wie Sie sehen, ändern sich die Daten beim ersten Klick auf die Schaltfläche, nicht jedoch beim zweiten Klick oder bei jedem nachfolgenden Klick.

Ich bin mir bewusst, dass setState() asynchron ist und Batchupdates, aber was ich nicht verstehe, ist, warum es erfolgreich auf den ersten Klick funktioniert, aber nicht jeden zweiten Klick und warum der Rückruf aufgerufen wird, aber der Staat hasn ' t hat sich geändert.

bearbeiten: Ich denke, das Problem hängt mit react-chartjs-2 zusammen. Wenn ich die import-Anweisung entfernen, um die Komponente Bar zu importieren, und stattdessen Bar als eine reguläre Funktionskomponente definieren, die nicht mit Chartjs verknüpft ist, wechselt der Status App erfolgreich zwischen den beiden Datenobjekten bei jedem Klick.

So scheint es mit der Weitergabe der Daten prop in die Bar Komponente von react-chartjs-2 verbunden sein. Obwohl ich nicht sicher bin, warum das den Zustand von App davon abhält, sich zu ändern, da es die oberste Komponente ist.

Here is a JSFiddle zeigt, wie es funktioniert, wenn nicht Bar als eine react-chartjs-2-Komponente verwendet wird.

Answer 1

Ich wünschte, ich könnte dies als Kommentar verwenden, aber ich erstelle genau was du hast und kann deinen Fehler nicht replizieren. Ihr Code ist schwer zu interpretieren und das könnte mich/uns abwerfen. Dies ist meine Implementierung Ihres handleUpdate

const chartData = this.updated ? chart2 : chart1 
this.setState({chartData},() => { 
    this.updated = this.updated ? false : true 
})