在带有 chart.js 的 react.js 中，我无法访问组件中的数据

Question

I have a simple chart with chart.js in React.js app. I would like to acces at my data in my component. For create a simple button to add data in my chart. But he send me an error. Could you please help me and explain me to acces to my data in an other componant. Thx you so much.

My componant BarChart.js

import React from "react"
import { Bar } from 'react-chartjs-2'

const BarChart = () => {
    return (
        <div>
            <Bar 
                data={{
                    labels: ['Paris', 'Boston', 'Berlin', 'Dublin', 'Barcelone', 'Lisbonne'],
                    datasets: [{
                        label: 'Populations en millions',
                        data: [2.2, 0.7, 3.8, 1.4, 1.6, 0.6],
                        backgroundColor: [
                            'rgba(255, 99, 132, 0.2)',
                            'rgba(54, 162, 235, 0.2)',
                            'rgba(255, 206, 86, 0.2)',
                            'rgba(75, 192, 192, 0.2)',
                            'rgba(153, 102, 255, 0.2)',
                            'rgba(255, 159, 64, 0.2)'
                        ],
                        borderColor: [
                            'rgba(255, 99, 132, 1)',
                            'rgba(54, 162, 235, 1)',
                            'rgba(255, 206, 86, 1)',
                            'rgba(75, 192, 192, 1)',
                            'rgba(153, 102, 255, 1)',
                            'rgba(255, 159, 64, 1)'
                        ],
                        borderWidth: 1
                    }]
                }}
            height={500}
            width={500}
            options={{
                maintainAspectRatio: false,
                scales: {
                    yAxes: [
                        {
                            ticks: {
                                beginAtZero: true,
                            },
                        },
                    ],
                },
            }}
            />
        </div>
    )
}

export default BarChart

My componant ButtonChart.js

import React from "react"
import BarChart from "./BarChart";

const ButtonChart = () => {
    return (
        <div className="inputBox">
            <input type="number" className="inputAdd" placeholder="Valeur" id="inputData"/>
            <input type="text" className="inputAdd" placeholder="Année" id="label"/>
            <button onClick={updateChart()} id="insertData">Ajouter une donnée</button>
        </div>
    )
}

function updateChart() {
    const inputData = document.getElementById('inputData');
    BarChart.data.datasets[0].data.push(inputData.value);
}

export default ButtonChart

enter image description here

Answer 1

Accessing BarChart.data seems wrong as, BarChart is basically a functional React component.

What you want is probably this:

1. You have a data array.
2. You want to show that data in a BarChart
3. You want to give a button to the user such that when user clicks that button, a new row is added into that data array.
4. And when that data array changes, you want the BarChart to refresh and display the updated data array.

If this is the case, then I would recommend checking the Lifting State Up in the React docs. It is pretty much the same use case here. You have a single data source shared across 2 components.

Also, check the usage of React hooks for checking state usage: https://reactjs.org/docs/hooks-state.html

Here is a pseudocode you can try:

ParentComponent = () => {

    // 1. Create your data state here using React Hooks
    const [data, setData] = useState([someInitialData]);
    
    return (
        <div>
            // 2. BarChart now relies on the data in the state
            //    Whenever the data updates, the chart refreshes
            <BarChart data={data}/>
            // 3. Pass setData to the component and trigger it with the 
            //    button's onClick handler
            <ButtonChart updateData={setData}/>
        </div>
    );
}