Chart.js не рендерится с setState, переданным как Prop for Data

Question

Я работаю над выводом графика Dought с использованием React-chart2.js

Когда я все подключу, мое приложение будет использовать процент, рассчитанный для каждого типа доходов / расходов, а затем отобразит.

Сейчас я пытаюсь установить изменение setState в правом блоке кода, но моя кольцевая диаграмма не отображается. У меня есть настройки console.log, чтобы увидеть, обновляется ли this.state.chartData ...., и это так.

Любая идея, что я делаю неправильно:

Родительский компонент, который контролирует состояние:

import React, { Component } from 'react';
import IncomeList from './components/IncomeList';
import ExpenseList from './components/ExpenseList';
import AddItem from './components/AddItem';
import Chart from './components/Chart';
import './App.css';

class App extends Component {
constructor(){
    super()
    this.state = {
        incomeItems: [],
        expenseItems: [],
        totalIncome: 0,
        totalExpense: 0,
        color: 'black',
        incEarned: 0,
        incInvest: 0,
        incSales: 0,
        incRe: 0,
        incServices: 0,
        incOther: 0,
        incEarnedPCT: 0,
        incInvestPCT: 0,
        incSalesPCT: 0,
        incRePCT: 0,
        incServicesPCT: 0,
        incOtherPCT: 0,
        chartData: {}
    }

    this.addBudgetItem = this.addBudgetItem.bind(this); 
    this.addExpenseItem = this.addExpenseItem.bind(this);
    this.deleteIncomeItem = this.deleteIncomeItem.bind(this);
    this.deleteExpenseItem = this.deleteExpenseItem.bind(this);
}


addBudgetItem (item, amount, category) {
    let newIncomeTotal = this.state.totalIncome + parseInt(amount);
    this.setState(
        {
            incomeItems: [...this.state.incomeItems, {item: item, amount: amount, category: category}],
            totalIncome: newIncomeTotal
        }, () => {
            const newIncList = this.state.incomeItems;
            let incEarned = this.state.incEarned;
            let incInvest = this.state.incInvest;
            let incSales = this.state.incSales;
            let incRe = this.state.incRe;
            let incServices = this.state.incServices;
            let incOther = this.state.incOther;

            let incEarnedPCT = 0;
            let incInvestPCT = 0;
            let incSalesPCT = 0;
            let incRePCT = 0;
            let incServicesPCT = 0;
            let incOtherPCT = 0;

    newIncList.map((item) => {
        if(item.category === 'earned'){
            incEarned += parseInt(item.amount);
            incEarnedPCT = incEarned/parseInt(this.state.totalIncome);

        } else if (item.category === 'invest'){
            incInvest += parseInt(item.amount);
            incInvestPCT = incInvest/parseInt(this.state.totalIncome);

        } else if (item.category === 'sales'){
            incSales += parseInt(item.amount);
            incSalesPCT = incSales/parseInt(this.state.totalIncome);

        } else if (item.category === 're'){
            incRe += parseInt(item.amount);
            incRePCT = incRe/parseInt(this.state.totalIncome);

        } else if (item.category === 'services'){
            incServices += parseInt(item.amount);
            incServicesPCT = incServices/parseInt(this.state.totalIncome);

        } else {
            incOther += parseInt(item.amount);
            incOtherPCT = incOther/parseInt(this.state.totalIncome);
        }
    })

        //let newData = [incEarnedPCT, incInvestPCT, incSalesPCT, incRePCT, incServicesPCT, incOtherPCT];
        this.setState({
            incEarnedPCT: incEarnedPCT,
            incInvestPCT: incInvestPCT,
            incSalesPCT: incSalesPCT,
            incRePCT: incRePCT,
            incServicesPCT: incServicesPCT,
            incOtherPCT: incOtherPCT,
            chartData: {
            labels: ['Earned', 'Investments', 'Sales', 'Real Estate', 'Services', 'Other'],
            datasets: [
            {
              label: 'Income Distribution',
              backgroundColor: ['rgba(250,75,185,0.2)', 'rgba(255,99,132,0.2)', 'rgba(255,90,132,0.5)', 'rgba(255,80,110,0.2)', 'rgba(235,75,150,.2)'],
              data: [50, 55, 3, 44, 25, 60]
            }
            ]

        }
        }, () => {
                    console.log(`Earned: ${incEarned}  PCT: ${this.state.incEarnedPCT}\n Invest: ${incInvest} PCT: ${this.state.incInvestPCT}\n Sales: ${incSales} PCT: ${this.state.incSalesPCT}\n Real Estate: ${incRe} PCT: ${this.state.incRePCT}\n Services: ${incServices} PCT: ${this.state.incServicesPCT}\n Other: ${incOther} PCT: ${this.state.incOtherPCT}`);
                    alert(`CURRENT DATA: ${this.state.chartData.datasets[0].data}`);
        })


    })
}


addExpenseItem (expItem, expAmount, expCategory) {
    let newExpenseTotal = this.state.totalExpense + parseInt(expAmount);

    this.setState({
         expenseItems: [...this.state.expenseItems, {expItem: expItem, expAmount: expAmount, expCategory: expCategory}],
        totalExpense: newExpenseTotal
    })
}

deleteIncomeItem (index) {
    const newIncList = this.state.incomeItems;
    const slicedIncome = newIncList.slice(0, index).concat(newIncList.slice(index + 1));
    this.setState({incomeItems: slicedIncome}); 

    let total = 0;
    slicedIncome.map((inc) => {total += parseInt(inc.amount)});
    this.setState({totalIncome: total});
}   

deleteExpenseItem (index) {
    const newExpList = this.state.expenseItems;
    const slicedExp = newExpList.slice(0, index).concat(newExpList.slice(index + 1));
    this.setState({expenseItems: slicedExp}); 

    let total = 0;
    slicedExp.map((exp) => {total += parseInt(exp.expAmount)});
    this.setState({totalExpense: total});
}

render() {

return (
  <div className="App">
    <header className="App-header">
      <h1 className="App-title">Monthly Budget</h1>
    </header>

    <div className="container">
        <AddItem addBudgetItem={this.addBudgetItem} addExpenseItem={this.addExpenseItem}/>
        <div className="line"></div>
        <div className="UIdiv"> 
            <table>
                <h1>INCOME ITEMS</h1>
                <tr><IncomeList incomeList={this.state.incomeItems} deleteIncomeItem={this.deleteIncomeItem}/></tr>
                <p className="income-desc">Total Income: {this.state.totalIncome}</p>
            </table>
            <table>
                <h1>EXPENSE ITEMS</h1>
                <tr><ExpenseList expenseList={this.state.expenseItems} deleteExpenseItem={this.deleteExpenseItem}/></tr>
                <p className="expense-desc">Total Expense: {this.state.totalExpense} </p>
            </table>

    <h2 style={(this.state.totalIncome - this.state.totalExpense === 0) ? {color: 'black'}: (this.state.totalIncome > this.state.totalExpense) ? {color:'green'}:{color:'red'}}> TOTAL BALANCE: {this.state.totalIncome - this.state.totalExpense}</h2>
        </div>
    </div>
    <div>
    <Chart chartData={this.state.chartData}/>

    </div>
 </div>
);
  }
}

export default App;

//Child Component - Chart
import React from 'react'
import {Doughnut} from 'react-chartjs-2';

class Chart extends React.Component {
constructor(props){
super(props);
this.state = {
    chartData: props.chartData
    }
}
    render(){   
        return (
        <Doughnut
            data={this.state.chartData}
            width={100}
            height={50}
        />
    )
    }
}

export default Chart