Javascript 如何在React中将数据传递到Chart.js Chart

我正在做一个项目，在这个项目中，你可以输入你一周花费的钱（我有食品杂货、购物、健康和家庭需求输入），然后计算总金额，将其添加到一个组件中。该项目中的另一个功能是使用chart.js制作的图表，它应该显示花费在食品杂货、购物、健康和家庭需求上的金额。但这部分我有问题。我试图通过道具传递存储在受控输入中的数据，但数据没有显示在图表中。有人能帮我吗？代码如下：

 import React from "react";

import Header from "./Header";
import InputComponent from "./InputComponent";
import AmountCard from "./AmountCard";

import BillChart from "./BillsChart";

class SpendsApp extends React.Component {
constructor(props) {
 super(props);
 this.state = {
   groceries: 10,
   shopping: 0,
   health: 0,
   houseNeeds: 0,
   total: 0,
   chartData: []
 };
 this.handleChange = this.handleChange.bind(this);
 this.handleSubmit = this.handleSubmit.bind(this);
}

handleChange(e) {
 const { name, value } = e.target;
 this.setState({
   [name]: value
 });
}

handleSubmit(e) {
 const { groceries, shopping, health, houseNeeds } = this.state;

 const gSum = parseInt(groceries, 10);
 const sSum = parseInt(shopping, 10);
 const hSum = parseInt(health, 10);
 const hnSum = parseInt(houseNeeds, 10);

 this.setState({
   total: gSum + sSum + hSum + hnSum
 });
 e.preventDefault();
}

render() {
 return (
   <div className="main">
     <Header />
     <hr />
     <div>
       <form onSubmit={this.handleSubmit}>
         <div className="input-flex">
           <InputComponent
             handleChange={this.handleChange}
             name="groceries"
             placeholder="Groceries"
           />
           <InputComponent
             handleChange={this.handleChange}
             name="shopping"
             placeholder="Shopping"
           />
           <InputComponent
             handleChange={this.handleChange}
             name="health"
             placeholder="Health"
           />
           <InputComponent
             handleChange={this.handleChange}
             name="houseNeeds"
             placeholder="Home"
           />
         </div>
         <button>Calculate</button>
       </form>
     </div>

     <AmountCard spent={this.state.total} />

     <BillChart spendings={[this.state.chartData]} />
   </div>
 );
}
}

export default SpendsApp;

从“React”导入React；
从“/Header”导入标题；
从“/InputComponent”导入InputComponent；
从“/AmountCard”导入AmountCard；
从“/BillsChart”导入BillChart；
类SpendsApp扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
食品杂货：10，
购物：0，
健康状况：0，
房屋需求：0，
总数：0，
图表数据：[]
};
this.handleChange=this.handleChange.bind（this）；
this.handleSubmit=this.handleSubmit.bind（this）；
}
手变（e）{
常量{name，value}=e.target；
这是我的国家({
[名称]：值
});
}
handleSubmit（e）{
康斯特{食品杂货、购物、健康、住房需求}=本州；
const gSum=parseInt（食品杂货，10）；
const-sSum=parseInt（购物，10）；
const hSum=parseInt（健康，10）；
const hnSum=parseInt（房屋需求，10）；
这是我的国家({
总计：gSum+sSum+hSum+hnSum
});
e、 预防默认值（）；
}
render（）{
返回(

算计
);
}
}
导出默认SpendsApp；

这是第二个

 import React from "react";

import { Bar } from "react-chartjs-2";

class BillsChart extends React.Component {
constructor(props) {
 super(props);
 this.state = {
   chartData: {
     labels: ["Groceries", "Shopping", "Health", "House Needs"],
     datasets: [
       {
         label: "Amount Spent",
         backgroundColor: "green",
         hoverBackgroundColor: "green",
         hoverBorderWidth: 2,
         hoverBorderColor: "#000",
         data: [this.props.spendings]
       }
     ]
   }
 };
}

render() {
 return <Bar onClick={this.props.handleClick} data={this.state.chartData} />;
}
}

export default BillsChart;

从“React”导入React；
从“react-chartjs-2”导入{Bar}；
类BillsChart扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
图表数据：{
标签：[“杂货”、“购物”、“健康”、“房屋需求”]，
数据集：[
{
标签：“花费金额”，
背景颜色：“绿色”，
hoverBackgroundColor:“绿色”，
悬停边界宽度：2，
hoverBorderColor:#000“，
数据：[这个。道具。花销]
}
]
}
};
}
render（）{
返回；
}
}
导出默认BillsChart；

您正在渲染中设置BillChart上的道具

开销

，它将一个空数组作为道具传递给组件

this.state = {
   groceries: 10,
   shopping: 0,
   health: 0,
   houseNeeds: 0,
   total: 0,
   chartData: []
 };


 <BillChart spendings={[this.state.chartData]} />

---

在将chartData作为道具传递之前，需要将其状态设置为空数组之外的值。

只需在BillsChart中的render（）上写一个方法即可

    componentDidUpdate(prevProps) {
    if (prevProps.spendings !== this.props.spendings) {

     let {chartData} = this.state;
     chartData.datasets[0].data = this.props.spendings
     this.setState({chartData});

    }
  }

---

首先，在

SpendsApp

组件中，您从未更改chartData状态的值。您可以更改总数和其他属性的数量，但不会更改传递的图表数据的值

你可以吃这样的东西

 //code....
  constructor(props) {
    super(props);

    this.state = {
      groceries: 10,
      shopping: 0,
      health: 0,
      houseNeeds: 0,
      total: 0,
      chartData: []
    }
 }



handleSubmit(e) {
   e.preventDefault();
   const { groceries, shopping, health, houseNeeds } = this.state;

   const gSum = parseInt(groceries, 10);
   const sSum = parseInt(shopping, 10);
   const hSum = parseInt(health, 10);
   const hnSum = parseInt(houseNeeds, 10);

  // chartData array elements should be ordered as in your labels in the <BillsChart/>
  // labels: ["Groceries", "Shopping", "Health", "House Needs"] as you have it
  this.setState({
      total: gSum + sSum + hSum + hnSum,
      chartData: [gSum, sSum, hSum, hnSum] 
  });
}

---

这不会产生任何问题。当您从“/BillsChart”导入BillChart时，您正在定义一个名为BillChart的新变量，或者可以随意命名。好的，是的，我想是的，我只是从来没有见过有人使用这样的不同名称。超级混乱。我会看一看，看看还有什么。@AliHayder更新了我的回答谢谢你的帮助，我添加了它，并做了其他必要的修复，它按照我想要的方式工作，非常感谢你！欢迎您@GabrielTisoVinhasdeBrito。请将我的答案标记为已接受，然后按向上箭头进行投票。

 //code....
  constructor(props) {
    super(props);

    this.state = {
      groceries: 10,
      shopping: 0,
      health: 0,
      houseNeeds: 0,
      total: 0,
      chartData: []
    }
 }



handleSubmit(e) {
   e.preventDefault();
   const { groceries, shopping, health, houseNeeds } = this.state;

   const gSum = parseInt(groceries, 10);
   const sSum = parseInt(shopping, 10);
   const hSum = parseInt(health, 10);
   const hnSum = parseInt(houseNeeds, 10);

  // chartData array elements should be ordered as in your labels in the <BillsChart/>
  // labels: ["Groceries", "Shopping", "Health", "House Needs"] as you have it
  this.setState({
      total: gSum + sSum + hSum + hnSum,
      chartData: [gSum, sSum, hSum, hnSum] 
  });
}

<BillChart spendings={[this.state.chartData]} />

<BillChart spendings={this.state.chartData} />

componentDidUpdate(prevProps) {
  if (prevProps.spendings !== this.props.spendings) {
     let chartData = this.state.chartData;

     chartData.datasets[0].data = this.props.spendings
     this.setState({chartData});
  }
}