javascript - 如何在 React 中将数据传递给 Chart.js 图表

Question

我正在做一个项目，在这个项目中，你可以输入一周内花费的金额(我有杂货、购物、健康和家庭需求输入)，它会计算总金额，并将其添加到零件。该项目的另一个功能是使用 Chart.js 制作的图表，它应该显示在杂货、购物、健康和家庭需求方面花费的金额。但是我在这部分遇到了麻烦。我试图通过 Prop 传递存储在受控输入中的数据，但数据未显示在图表中。有人可以帮我吗？这是代码:

 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;

这是第二个

 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;

Answer 1

首先，在你的 SpendsApp您从未更改过 chartData 状态值的组件。您更改了总数和其他属性的数量，但您永远不会更改传递的 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] 
  });
}

还有一件事是，而不是这个:

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

试试这个

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

这样做的原因是，如果你正确地传递了数组中的值，你最终会在这里得到一个二维数组 data: [this.props.spendings] .

如果你已经安装了你的组件，你应该使用 componentDidUpdate()改变 <BillChart/> 的状态:

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

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