Tengo un componente React funcional que dibuja un polígono en un lienzo. El resultado se ve así:

Mi código es (he omitido las cosas irrelevantes):

 import { useEffect, useState } from "react"; function Plot(props) { const [localPolygon, setlocalPolygon] = useState(props.polygon); useEffect(() => { // in here get the canvas context const { context } = getContext(); // transforms data and draw the polygon on the canvas canvas }, [localPolygon]); const handleMouseMove = (event) => { // making some changes here to localPolgon as user drag // then update localPolygon setLocalPolygon(localPolygon); // I now expect the polygon to change position, but it does not }; return ( <> {" "} <canvas className="canvas" onMouseMove={(e) => { let nativeEvent = e.nativeEvent; handleMouseMove(nativeEvent); }} /> </> ); } export default Plot;

Entonces, el componente se carga y, en useEffect , hago una transformación de los datos y los dibujo en el lienzo. Esto funciona bien. Ahora quiero arrastrar el polígono. Puedo obtener las nuevas coordenadas mientras arrastro y actualizo localPolygon con setLocalPolygon(localPolygon) . Puedo ver que se actualiza, pero el polígono no cambia de posición porque el componente no parece volver a renderizarse, y no se llama a useEffect , que es lo que actualizará el lienzo. Puedes ver que tengo localPolygon como segundo parámetro en useEffect . ¿Algunas ideas?