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

Question

我正在将数据从 parent 传递到 child component in react ，from App.js to chart.js 通过 props 并且传递了值，我可以看到它们 在 child 组件中记录了控制台，但我想要随着道具值的改变属性改变图表数据的状态，这样图表也会改变。

这是我的子代码 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在道具改变时更新你的状态

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

Answer 2

使用 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 3

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


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;

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

How to update State of chart.js in React

javascript

mean

node.js

reactjs

mern