如何在 React 中更新 chart.js 的状态

Question

我正在将数据从 parent 传递到 react 中的子组件，从 App.js 到 chart.js 通过 props 并且值已传递，我可以看到它们在子组件中记录控制台，但我想随着道具值的更改而更改图表数据属性的状态这样图形也会发生变化。

这是我的子 component/chart.js 文件代码

import { useState } from "react";
import { Line ,Bar} from "react-chartjs-2"

const Bargraph = ({totalIncome,Balance,Expenses}) => {

**console.log("data is ",totalIncome,Balance,Expenses)**

const [state,setState] = useState({

    labels:["Total Income","Expenses","Current Balance"],
    datasets:[{

        backgroundColor: 'rgba(75,192,192,1)',
        borderColor: 'rgba(0,0,0,1)',
        borderWidth: 2,
        data:[totalIncome,Balance,Expenses]

    }]
})



    return ( 
<section className="chart mb-4 mt-lg-5">

<div className="container-lg">
    <div className="text-center">

        <h2>  Income , Expenses and Current Balance  </h2>
        <p className="lead"> Bar graph showing Total icnome , Expenses and remaining balance </p>
    
    </div>

<div className="row justify-content-center align-items-center mt-3 g-4">

<div className="col-md-5">

<Line data={state}
    
    options={{
            title:{
              display:true,
              text:'Income , Expenses and Current Balance',
              fontSize:20
            },
            legend:{
              display:true,
              position:'right'
            }
          }}

 />




</div>


<div className="col-md-5">

<Bar data={state}
    
    options={{
            title:{
              display:true,
              text:'Income , Expenses and Current Balance',
              fontSize:20
            },
            legend:{
              display:true,
              position:'right'
            }
          }}

 />



</div>
</div>




</div>

</section>

     );
}
 
export default Bargraph;

Answer 1

使用 useEffect 获取更新的值。

import { useState } from "react";
import { Line ,Bar} from "react-chartjs-2"

var Bargraph = ({totalIncome,Balance,Expenses}) => {

**console.log("data is ",totalIncome,Balance,Expenses)**

const [state,setState] = useState({

    labels:["Total Income","Expenses","Current Balance"],
    datasets:[{

        backgroundColor: 'rgba(75,192,192,1)',
        borderColor: 'rgba(0,0,0,1)',
        borderWidth: 2,
        data:[totalIncome,Balance,Expenses]

    }]
})

useEffect(() => {
    setState({
        labels:["Total Income","Expenses","Current Balance"],
        datasets:[{
            backgroundColor: 'rgba(75,192,192,1)',
            borderColor: 'rgba(0,0,0,1)',
            borderWidth: 2,
            data:[totalIncome,Balance,Expenses]
    
        }]
    })

}, [totalIncome,Balance,Expenses]);


    return ( 
<section className="chart mb-4 mt-lg-5">

<div className="container-lg">
    <div className="text-center">

        <h2>  Income , Expenses and Current Balance  </h2>
        <p className="lead"> Bar graph showing Total icnome , Expenses and remaining balance </p>
    
    </div>

<div className="row justify-content-center align-items-center mt-3 g-4">

<div className="col-md-5">

<Line data={state}
    
    options={{
            title:{
              display:true,
              text:'Income , Expenses and Current Balance',
              fontSize:20
            },
            legend:{
              display:true,
              position:'right'
            }
          }}

 />




</div>


<div className="col-md-5">

<Bar data={state}
    
    options={{
            title:{
              display:true,
              text:'Income , Expenses and Current Balance',
              fontSize:20
            },
            legend:{
              display:true,
              position:'right'
            }
          }}

 />



</div>
</div>




</div>

</section>

     );
}
 
export default Bargraph;

Answer 2

您可以使用useEffect 在道具更改时更新您的状态

  useEffect(() => {
    setState([
      {
        backgroundColor: "rgba(75,192,192,1)",
        borderColor: "rgba(0,0,0,1)",
        borderWidth: 2,
        data: [totalIncome, Balance, Expenses],
      },
    ]);
  }, [totalIncome, Balance, Expenses]);

Answer 3

关于 useEffect 的其他答案显示了在使用状态时如何实现这一点。但是，您的示例根本不需要状态。将 props 视为与 state 非常相似： 更改会自动触发重新渲染，因此如果您可以直接从中计算某些内容，请在渲染函数/功能组件中进行。

import { Line ,Bar} from "react-chartjs-2"

const Bargraph = ({totalIncome,Balance,Expenses}) => {

// simply calculate the chartData from the props
const chartData = {

    labels:["Total Income","Expenses","Current Balance"],
    datasets:[{

        backgroundColor: 'rgba(75,192,192,1)',
        borderColor: 'rgba(0,0,0,1)',
        borderWidth: 2,
        data:[totalIncome,Balance,Expenses]

    }]
}



    return ( 
<section className="chart mb-4 mt-lg-5">

<div className="container-lg">
    <div className="text-center">

        <h2>  Income , Expenses and Current Balance  </h2>
        <p className="lead"> Bar graph showing Total icnome , Expenses and remaining balance </p>
    
    </div>

<div className="row justify-content-center align-items-center mt-3 g-4">

<div className="col-md-5">

<Line data={chartData}
    
    options={{
            title:{
              display:true,
              text:'Income , Expenses and Current Balance',
              fontSize:20
            },
            legend:{
              display:true,
              position:'right'
            }
          }}

 />




</div>


<div className="col-md-5">

<Bar data={chartData}
    
    options={{
            title:{
              display:true,
              text:'Income , Expenses and Current Balance',
              fontSize:20
            },
            legend:{
              display:true,
              position:'right'
            }
          }}

 />



</div>
</div>




</div>

</section>

     );
}
 
export default Bargraph;