Как получить данные для диаграммы js P ie Диаграмма из состояния в реакции js?

Question

Поскольку я новичок, чтобы реагировать, я изо всех сил пытался передавать данные из моего состояния на диаграмму js динамически ... что мне нужно, когда пользователь обновляет текстовое поле и запрашивает вывод, P ie диаграмма должна обновляться автоматически в соответствии с выводом ... я сохранил выходные значения в состоянии, но диаграмма P ie не позволяет мне передавать состояние в виде данных ...

Вот ссылка на Код Песочница https://codesandbox.io/s/autumn-mountain-sv1qk?fontsize=14&hidenavigation=1&theme=dark

 class Buyer extends Component {

        constructor(props) {
            super(props);
            this.state = {
                income: 100000,
                percent: 13,
                totalTax: '',
                grossPrice: '',
                otherValues: '',
            }
        }






PieChart = (Gross,totalTax) => {
    let GrossPrice = Gross  ;
    let TotalTax = totalTax ;
    let data = [GrossPrice,TotalTax]
    let Pie = {
            labels: ['Total Tax', 'Gross Price'],   
            datasets: [{
                data: data,
                backgroundColor: [
                    '#1ca5b6',
                    '#89ba2b',
                ],

            }]

        }

    }



handleIncome = (event) => {
    let income = event.target.value
    this.handleData(income, this.state.percent)
    console.log(this.state)

}

handlePercent = (event) => {
    let Percent = event.target.value
    this.handleSliderData(this.state.income, Percent)

}


// From Slider
sliderIncome = (event) => {
    this.setState({ income: event })
    this.handleSliderData(event, this.state.percent)
    // console.log(this.state)

}

sliderPercent = (event) => {
    this.setState({ percent: event })
    this.handleSliderData(this.state.income, event)

}


handleData = (income, Percent) => {
    this.setState({
        income: income,
        percent: Percent,
        totalTax: //some Calculations
        grossPrice: //some Calculations
        otherValues: //some Calculations

    })



    console.log(this.state)
}




handleSliderData = (income, Percent) => {
    this.setState({
        income: income,
        percent: Percent,
        totalTax: //some Calculations
        grossPrice://some Calculations
        otherValues://some Calculations
    })
    this.PieChart(this.state.grossPrice,this.state.totalTax)
    // console.log(this.state)

}


render() {
            return ( 
              <div>
                    <div >
                        <Card s>
                            <PieChart data={this.PieChart} width={600} height={300} />
                        </Card>
                    </div>
                </Col>

              )
     }

Я пытался создать функцию для диаграммы p ie, но не смог пройти ... любая помощь была бы признательна .. спасибо !!

Answer 1

Я думаю, что есть несколько проблем с кодом. Функция this.PieChart теперь ничего не возвращает. Беглый взгляд на код показывает, что вы пытаетесь передать реквизиты, необходимые для компонента PieChart, из функции this.PieChart. Верните все, что вам нужно в качестве пропеллера для компонента, а также вызовите функцию внутри JSX, используя скобки, передав необходимые параметры в функцию.

PieChart = (Gross,totalTax) => {
let GrossPrice = Gross  ;
let TotalTax = totalTax ;
let data = [GrossPrice,TotalTax]
let Pie = {
        labels: ['Total Tax', 'Gross Price'],   
        datasets: [{
            data: data,
            backgroundColor: [
                '#1ca5b6',
                '#89ba2b',
            ],

        }]

    }

}
return Pie; //or whatever data you need for the component

Также,

 <PieChart data={this.PieChart(this.state.grossPrice, this.state.totalTax)} width={600} height={300} />

Также, имейте в виду, чтобы использовать надлежащие соглашения об именах. Функции должны быть в случае верблюда (this.PieChart должен называться this.pieChart). Попробуйте использовать разные имена для компонента и функции. Это решит множество проблем, с которыми вы можете столкнуться

Обновление: я обновил «песочницу», которой вы поделились. Надеюсь это поможет. https://codesandbox.io/s/friendly-mahavira-79n2s

Answer 2

Я думаю, что нашел решение для конкретной проблемы ... я приказываю динамически обновлять данные в круговой диаграмме, используя состояние, которое мы создали в constructor(props), например, так ...

constructor(props) {
        super(props);
        this.state = {
            income: '',
            percent: '',
            totalTax: '',
            grossPrice: '',
            otherValues: '',
            Data: {} 
        }

    }

Затем я использовал componentDidMount(), чтобы смонтировать начальное состояние PieChart, как So ....

componentDidMount() {

        let runscore = [100,200];



        this.setState(
            {
                Data: {
                    labels: [
                        'Purple',
                        'Yellow',

                    ],
                    datasets: [
                        {

                            data: runscore,
                            backgroundColor: [
                                '#1ca5b6',
                                '#89ba2b',

                            ]
                        }
                    ]
                }
            });


    }

, затем я создал функцию PieChart = (Gross,totalTax), которая извлекает данные из других функций и использовал ее для установить состояние в Data следующим образом ...

PieChart = (Gross,totalTax) => {
        let runscore = [Gross,totalTax];
        this.setState({
            Data: {
                labels: [
                    'Gross Price',
                    'Total Tax',

                ],
                datasets: [
                    {
                        data: runscore,
                        backgroundColor: [
                            '#1ca5b6',
                            '#89ba2b',
                        ]
                    }
                ]
            }
        });


        }

Пока это не обновляет состояние в syn c с текущим состоянием, но я выполняю работу ... надеюсь, это поможет другим. ..