Tengo un elemento que creo a través de un patrón de visitante:
public Create(): void { ... globalThis.pinConfiguration.parts.push({type: this.element.localName, id: this.element.id, top: 0 , left: 0 }); const arr1: string[] = [this.elementID+":A", "pin:10"]; const arr2: string[] = [this.elementID+":C", "pin:GND"]; globalThis.pinConfiguration.connections.push(arr1, arr2); ... Drag(this.element); ... }El método de arrastre se ve así
export function Drag(element: HTMLElement) { const simulation = document.getElementById('simulation--simulationArea'); element.onmousedown = (e) => { simulation!.addEventListener('mousemove', handler); dragStart(e); } element.onmouseup = (e) => { simulation!.removeEventListener('mousemove', handler); simulation?.dispatchEvent(new Event('change')); dragEnd(e); } let xdiff: number = 0; let ydiff: number = 0; let isDragging: boolean = false; const dragStart = (e: any) => { xdiff = (e.screenX - element.getBoundingClientRect().left); ydiff = (e.screenY - element.getBoundingClientRect().top); isDragging = true; }; const dragging = (e: any) => { if (isDragging) { var left = e.screenX - xdiff - simulation!.getBoundingClientRect().left; var top = e.screenY - ydiff - simulation!.getBoundingClientRect().top; element.style.top = (top + "px").toString(); element.style.left = (left + "px").toString(); globalThis.pinConfiguration.parts.find(part => part.id === element.id)!.top = top; globalThis.pinConfiguration.parts.find(part => part.id === element.id)!.left = left; } }; const handler = (e: any) => { dragging(e); }; const dragEnd = (e: any) => { isDragging = false; }; } El problema es que todo el objeto creado parece recordar el estado inicial globalThis.pinConfiguration y cuando luego cambio la variable global en otro lugar (por ejemplo, me conecto a diferentes pines) y luego trato de arrastrar el componente creado, los valores globales vuelven al aquellos con los que se creó el elemento.
// This works function handleConnectionsChange(newValue: string) { try { globalThis.pinConfiguration = JSON.parse(newValue); setEditorContext(newValue); console.log('handleConnectionsChange'); console.log(globalThis.pinConfiguration); } catch (err) { console.error(err); } }¿Hay alguna manera de usar punteros/referencias en reaccionar? Me parece que la variable global se duplica en un lugar diferente de la memoria durante la creación del elemento y que esta es la raíz de todo el problema.
¿Alguien ha encontrado y resuelto esto? No soy un desarrollador web, tal vez el problema sea evidente para usted. Gracias.
El estado de almacenamiento en React se puede hacer con useState :
const [pinConfiguration, setPinConfiguration] = useState({ parts: [], connections: [], }); Use setPinConfiguration siempre que desee actualizar el estado global y pinConfiguration siempre que desee acceder a él.