Tengo los siguientes dos tipos:
export default interface ImageDataForAnnotation { src: string; name: string; key: number; regions?: Annotation[]; //This is defined below pixelSize?: PixelSize } export interface Annotation { type: string, x: number, y: number, w: number, h: number, highlighted: boolean, editingLabels: boolean, color: string, cls: string | undefined, id: number, image?: number, }Luego tengo una matriz donde cada imagen contiene una cantidad de anotaciones.
const [images, addImage] = useState<Array<ImageDataForAnnotation>>([]); //Definition of arary let imageArray = [...images]; Luego quiero editar una anotación en una imagen dada, donde tengo ambos índices para hacer algo como: imageArray[image_index].regions![annotation_index].update(new_annotation)
En primer lugar, cambiaría el nombre del método como addImage es engañoso porque el método puede usarse para editar/actualizar, o incluso eliminar/eliminar elementos de la matriz de images .
Entonces, en primer lugar:
const [images, setImages] = useState<Array<ImageDataForAnnotation>>([]); A continuación, supongamos que el índice está disponible en las variables denominadas: imageIndex y annotationIndex (nuevamente, CamelCase es mi preferencia) y el valor que debe usarse está en newAnnotation , luego para actualizar el elemento correspondiente dentro de las images de variables de estado, aquí está que haría yo:
setImages(prev => { const curr = [...prev]; curr?.[imageIndex]?.regions?.[annotationIndex] = newAnnotation; return curr; }); Use la función de callback de llamada para acceder al previous-state de las images y luego actualice el elemento específico y devuelva la versión actualizada. He usado un curr de copia superficial para una mejor legibilidad y no es necesario.