Estoy tratando de agregar una nueva burbuja en el gráfico cada vez que hacemos clic en el botón Agregar. Puedo actualizar el estado de los datos, es decir, Chartdata usando usestate hook pero el gráfico no se vuelve a representar y no muestra el gráfico de acuerdo con la nueva actualización. datos.
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;No sé qué estoy haciendo mal.
Por lo que puedo decir, está mutando el objeto data , que es una referencia al mismo objeto en el que inicializó su estado de chartData , y luego guarda el objeto de data mutado nuevamente en el estado de chartData .
En React, necesariamente debe copiar superficialmente todo el estado que se está actualizando. Cree un objeto newChartData a partir del estado actual de chartData y copie superficialmente las propiedades raíz, luego declare una nueva matriz de conjuntos de datasets copiando superficialmente la matriz de conjuntos de datasets del estado anterior. Esta es una nueva referencia de matriz en la que puede insertar nuevos valores.
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); }