Javascript 如何从React js中的状态获取图表js饼图的数据？

由于我是新手，我一直在努力将数据从我的状态动态传递到chartjs…我需要的是当用户更新文本框并要求输出时，饼图应根据输出自动更新自身…我已将输出值存储在状态中，但饼图不允许我将状态作为数据传递

下面是代码沙盒的链接

---

我尝试过为饼图创建一个函数，但未能通过…任何帮助都将不胜感激…谢谢

我认为代码有一些问题。 此.PieChart函数现在不返回任何内容。通过快速浏览代码，我可以看出您正试图通过这个.PieChart函数传递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

而且

此外，请记住使用正确的命名约定。函数应为驼峰式，this.PieChart应命名为this.PieChart。尝试为组件和函数使用不同的名称。这将解决你可能遇到的许多问题

---

更新：我已经更新了你共享的沙盒。希望这有帮助。

---

我想我找到了解决特定问题的方法…我命令使用状态动态更新piechart中的数据，我们在constructorprops中创建了一个状态，如下所示

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

    }

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

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


        }

然后我使用componentDidMount挂载PieChart的初始状态，如下所示

componentDidMount() {

        let runscore = [100,200];



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

                    ],
                    datasets: [
                        {

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

                            ]
                        }
                    ]
                }
            });


    }

然后我创建了一个函数PieChart=Gross，totalTax，它从另一个函数中获取数据，并用它来设置数据中的状态，比如

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

    }

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

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


        }

---

目前，这并不是更新与当前状态同步的状态，但我已经完成了工作…我希望这对其他人有所帮助…

Hello Rajat，当呈现道具时，您传递的数据的值为this。pieChart基本上会返回未定义的值，因为方法pieChart需要Gross，totalTax作为参数。如果你能展示一个真实的演示，那么你就可以更轻松地进行dubug。嗨，sohan…如果我添加了整个代码，这样你就可以看一看…我不知道如何添加实时演示，它真的很紧急…你能用代码创建一个代码沙盒吗？我已经更新了sohan的问题。。。这是我更新了您共享的沙盒的沙盒链接。希望这就是你所需要的。嘿..馅饼仍然有问题，并更新相同的值…但我想我可以从这里开始工作…谢谢你的时间…我不完全确定你的要求。我确实试图消除我看到的一些错误。