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

Posted 2023-03-24

【中文标题】如何在 React 中更新 chart.js 的状态

【英文标题】：How to update State of chart.js in React

【发布时间】：2021-10-13 19:01:22

【问题描述】：

我正在将数据从 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;

【参考方案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;

【参考方案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]);

【讨论】：

非常感谢您的时间和帮助:)

【参考方案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;

【讨论】：

感谢兄弟，这真的很有帮助，很重要的一点，你再次感谢！:)