如何使用chart.js在气泡图中使用react hook

Question

每当我们单击添加按钮时，我都试图在图表中添加新的气泡。我可以使用usestate钩子更新数据的状态，即图表数据，但图表不会重新渲染，也不会根据新更新的数据显示图表。

const data = 
{
datasets: [{
label: 'Grapefruit',
data: [{
x: 10,
y: 40,
r: 40
}
],
backgroundColor: 'rgb(255, 99, 132)'
},
{
label: 'Lime',

data: [{
x: 23,
y: 37,
r: 40
}    
],
backgroundColor: 'rgb(0, 152, 102)'
}
]
};
const  App = () => {

const [chartData, setchartData] = useState(data);

function callingChart(inputText,value)
{

const newl = [{x: data.datasets[1].data[0].x + l,y:data.datasets[1].data[0].y+ l,r:data.datasets[1].data[0].r + l}]
data.datasets.push({ label: inputText,
data: newl,
backgroundColor: 'rgb(255, 128, 0)'})

setchartData(data);          

}     
return (

<div className ="bubble">  
<BarChart data={chartData} options={options}/>
</div>

);
}
export default App;

我不知道我做错了什么。

Answer 1

根据我所知，您正在更改data对象，它是对您初始化chartData状态的同一对象的引用，然后将更改后的data对象保存回chartData状态。

在React中，您必须浅层复制正在更新的所有状态。从当前chartData状态创建一个newChartData对象并浅层复制根属性，然后通过浅层复制前一状态的datasets数组来声明一个新的datasets数组。这是一个新的数组引用，您可以将新值推入其中。

function callingChart(inputText, value) {
const newChartData = {
...chartData, // shallow copy chartData object
datasets: chartData.datasets.slice(), // shallow copy datasets array
}
if (value === "lime") {
const newl = [
{
x: chartData.datasets[1].data[0].x + l,
y: chartData.datasets[1].data[0].y + l,
r: chartData.datasets[1].data[0].r + l
}
];
newChartData.datasets.push({
label: inputText,
data: newl,
backgroundColor: "rgb(255, 128, 0)"
});
l--;
} else if (value === "coconut") {
const newc = [
{
x: chartData.datasets[2].data[0].x + c,
y: chartData.datasets[2].data[0].y + c,
r: chartData.datasets[2].data[0].r + c
}
];
newChartData.datasets.push({
label: inputText,
data: newc,
backgroundColor: "rgb(255, 128, 0)"
});
c--;
} else if (value === "grapefruit") {
const newg = [
{
x: chartData.datasets[0].data[0].x + g,
y: chartData.datasets[0].data[0].y + g,
r: chartData.datasets[0].data[0].r + g
}
];
newChartData.datasets.push({
label: inputText,
data: newg,
backgroundColor: "rgb(255, 128, 0)"
});
g--;
} else {
const newm = [
{
x: chartData.datasets[3].data[0].x + m,
y: chartData.datasets[3].data[0].y + m,
r: chartData.datasets[3].data[0].r + m
}
];
newChartData.datasets.push({
label: inputText,
data: newm,
backgroundColor: "rgb(255, 128, 0)"
});
m--;
}
setchartData(newChartData);
console.log(newChartData);
}