如何使用useState()更新react-chatjs-2绘图

Question

我正在尝试更新一个react-chattjs-2图，该图将新的获取日期作为道具从App.js传递到Chart.js组件。

我创建了一个按钮，它链接到主应用程序中调用useState的函数。

目前，我已经创建了两个数据集"data2"one_answers"data3"，按钮应该使用"data3的数据更新绘图。然而，每当我点击按钮时，它就变成了空白，而不是更新绘图。

我有一种感觉，我没有使用正确的方法来更新情节，但我没有找到很多关于它的信息。

Chart.js

import { Line } from 'react-chartjs-2';

const Chart = ({ data, options, onUpdate }) => {
const onClick = (e) => {
e.preventDefault()
onUpdate()
console.log(data)
}
const dataIn = data[0];
const optionsIn = options[0];

return(
<>
<div className='header'>
<h1 className='title'>Plot</h1>
<div className='links'>
<a
className='btn btn-gh'
onClick = {onClick}
>
Update plot
</a>
</div>
</div>
<Line data={dataIn} options={optionsIn} />
</>
)
}

export default Chart; 

App.js

import { useState, useEffect } from 'react'
import Chart from './components/Chart'
function App() {
const data2 = {
labels: ['1', '2', '3', '4', '5', '6'],
datasets: [
{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
fill: false,
backgroundColor: 'rgb(255, 99, 132)',
borderColor: 'rgba(255, 99, 132, 0.2)',
},
],
};
const data3 = {
labels: ['1', '2', '3', '4', '5', '6'],
datasets: [
{
label: '# of Votes',
data: [3, 2, 5, 3, 19, 12],
fill: false,
backgroundColor: 'rgb(255, 99, 132)',
borderColor: 'rgba(255, 99, 132, 0.2)',
},
],
};
const options2 = {
scales: {
yAxes: [
{
ticks: {
beginAtZero: true,
},
},
],
},
};
const [data, setData] = useState([
data2
])
const [options, setOptions] = useState([
options2
])

const updatePlot = () => {
setData(data3)
setOptions(options2)
}

return (
<div class="row">
<Chart data={data} options={options} onUpdate={updatePlot} />
</div>
);
}
export default App;

Answer 1

您的代码在useState钩子中有一个太多的括号(或者在updatePlot函数中有太少的括号(。以下代码运行良好。

Chart.js

import { Line } from "react-chartjs-2";
const Chart = ({ data, options, onUpdate }) => {
// const dataIn = data[0]; COMMENTED OUT
// const optionsIn = options[0]; COMMENTED OUT
// REMOVED onClick function
return (
<>
<div className="header">
<h1 className="title">Plot</h1>
<div className="links">
<a className="btn btn-gh" onClick={onUpdate}>
Update plot
</a>
</div>
</div>
<Line data={data} options={options} />
</>
);
};
export default Chart;

App.js

import { useState } from "react";
import Chart from "./Chart";
function App() {
var chartReference = {};
const data2 = {
labels: ["1", "2", "3", "4", "5", "6"],
datasets: [
{
label: "# of Votes",
data: [12, 19, 3, 5, 2, 3],
fill: false,
backgroundColor: "rgb(255, 99, 132)",
borderColor: "rgba(255, 99, 132, 0.2)",
},
],
};
const data3 = {
labels: ["1", "2", "3", "4", "5", "6"],
datasets: [
{
label: "# of Votes",
data: [3, 2, 5, 3, 19, 12],
fill: false,
backgroundColor: "rgb(255, 99, 132)",
borderColor: "rgba(255, 99, 132, 0.2)",
},
],
};
const options2 = {
scales: {
yAxes: [
{
ticks: {
beginAtZero: true,
},
},
],
},
};
const [data, setData] = useState(data2); // REMOVED BRACKETS
const [options, setOptions] = useState(options2); // REMOVED BRACKETS
const updatePlot = () => {
setData(data3);
setOptions(options2); // This is redundant for the purpose
};
return (
<div class="row">
<Chart data={data} options={options} onUpdate={updatePlot} />
</div>
);
}
export default App;