Tengo un problema interesante con las referencias.
Estoy mapeando un componente y renderizándolo varias veces y pasando una referencia a cada uno
const ref = useRef() {data.map(d) => ( <Component {...lotsOfOtherProps} ref={ref} /> )}Luego, en un componente nieto tengo:
const anotherRef = React.useRef() useImperativeHandle(ref, () => ({ reset: () => { anotherRef?.current.reset() }, }))En este componente tengo un botón y cuando lo alterno llamo
anotherRef?.current?.reset() y esto funciona y hace lo que quiero
pero me pregunto cuando hago clic en el botón "restablecer todo", ¿cómo puedo restablecer todas las referencias?
Está reemplazando la referencia con cada iteración y finalmente asignándola al último elemento. Necesita crear una matriz de referencias.
const refs = []; { data.map((d, index) => { const newRef = React.createRef(); refs[index] = newRef; return <Component {...lotsOfOtherProps} ref={newRef} />; }); } refs contendrá la matriz de ref para cada componente creado a partir de la matriz de data .