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

Question

我在 React.js 应用中有一个带有 chart.js 的简单图表。我想访问我的组件中的数据。创建一个简单的按钮来在我的图表中添加数据。但是他给我发了一个错误。您能否帮助我并解释我在其他组件中访问我的数据。非常感谢。

我的组件 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

我的组件 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

访问 BarChart.data 似乎是错误的，因为 BarChart 基本上是一个功能性 React 组件。

你想要的大概是这样的：

1. 您有一个data 数组。
2. 您想在BarChart 中显示data
3. 您想为用户提供button，这样当用户单击该按钮时，会在该data 数组中添加一个新行。
4. 当data 数组发生变化时，您希望BarChart 刷新并显示更新后的data 数组。

如果是这种情况，那么我建议您查看 React 文档中的 Lifting State Up。这里的用例几乎相同。您有一个跨 2 个组件共享的数据源。

另外，检查 React 钩子的使用情况以检查状态使用情况：https://reactjs.org/docs/hooks-state.html

这是一个你可以试试的伪代码：

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>
    );
}