Tengo una aplicación de reacción mecanografiada con un gráfico de gráficos altos. Quiero actualizar una etiqueta de "precio" (fuera del carro alto) en función de los datos que obtengo cuando un usuario pasa el mouse sobre una parte del gráfico.
La devolución de llamada mouseOver funciona bien y puedo registrar con éxito los datos que quiero en la consola. Pero cuando trato de actualizar el estado del precio usando el enlace useState para setPrice, aparece un error de highcharts. Si comento la línea setPrice, no hay errores. ¿Alguna idea?
Uncaught TypeError: Cannot read properties of null (reading 'yAxis') at highstock.src.js:24009 at Array.forEach (<anonymous>) at c.getAnchor (highstock.src.js:23992) at c.refresh (highstock.src.js:24517) at c.runPointActions (highstock.src.js:27941) at c.onContainerMouseMove (highstock.src.js:27502)Aquí hay un pseudocódigo de cómo lo he implementado:
const [price, setPrice] = useState<number>(0) options = { ... plotOptions: { series: { point: { events: { mouseOver: function(e:any) { price = // logic to fetch price based on mouse position console.log(price) setPrice(price) } } } } } }Y el html (componentes con estilo)
<Price>{ price }</Price>Es probable que los datos no estén disponibles de inmediato, por eso devuelve datos nulos. Sin embargo, puede configurar los datos de forma asíncrona usando un retraso setTimeout como este.
const [price, setPrice] = useState<number>(0) options = { ... plotOptions: { series: { point: { events: { mouseOver: function(e:any) { price = // logic to fetch price based on mouse position console.log(price) setTimeout(() => { // This is where the delay comes in setPrice(price) }, 0) } } } } } }Mi corazonada es que hay un retraso de tiempo para devolverte esos datos. Pruebe async/await y luego vuelva a establecer su estado en esos resultados.