Tirando fuori i miei capelli cercando di creare una serie di ref con un .map

Sto colpendo un muro di mattoni qui. Ho un .map che sta creando un elenco di elementi con un componente che mostra ogni elemento. Devo generare un array o un oggetto contenente un riferimento per ogni elemento nell'elenco. Non posso farlo accadere! Sono in perdita totale e la mia scadenza è domani mattina. Sono in grado di creare un array che contiene il numero di ref di cui ho bisogno in base alla lunghezza dell'array di elementi mappati, ma indipendentemente da ciò che faccio, ogni ref elenca solo null.In alternativa, forse se potessi creare un riferimento all'elemento in questione quando si fa clic sull'elemento, ciò potrebbe aiutarmi a raggiungere anche il mio obiettivo finale.EDIT:La soluzione era implementare correttamente forwardRef sul componente che visualizza ogni elemento nell'elenco.

Risposte

05/08/2021
Gris
Grazie anche, non consiglierei di provare a sous vide una pizza però.

Per inciso, se non stavi usando più ref, puoi semplicemente posizionare un oggetto ref restituito da useRef direttamente: `ref = {ref}`. Tuttavia, questo non funzionerà per il tuo caso d'uso, ma è quello che vuoi quando sai in anticipo di quanti ref avrai bisogno e vuoi usare useRef.

Modifica scusa, rileggi il codice, sembra a posto. Hai creato tu stesso IndividualTracker? Ti sei ricordato di usare React.forwardRef?

"const IndividualTracker = React.forwardRef ((props, ref) => <div ref = {ref}> ..."
05/08/2021
Derby
Come sempre, la decisione dipende dal caso d'uso. Il controllo degli input archiviando e recuperando il suo valore dallo stato offre più opzioni di gestione dei dati, ma più funzionalità sono accompagnate da più complessità come la gestione delle prestazioni, poiché ora ogni modifica di input provoca un cambiamento di stato e possibilmente più rendering.

In generale, tuttavia, e secondo i documenti di React, la maggior parte dei casi d'uso richiede comunque input controllati e le prestazioni di solito non sono un problema. Nelle librerie di moduli React, tengono conto di potenziali problemi di prestazioni fornendo componenti di input non controllati come opzione.

Infine, a volte stai utilizzando un componente di input personalizzato da una libreria che gestisce il proprio stato internamente, quindi non hai altra scelta che trattarlo come un componente non controllato.
05/08/2021
Noli
Ciò solleva una domanda interessante che ho. Ho usato ref come quello e ha funzionato, ma praticamente tutti i miei input sono controllati ora. È più codice perché React lo gestisce piuttosto che il DOM, ma ho trovato che è solo più stabile avere solo gli stati e usarli per gli input. Quali sono i tuoi pensieri? L'input dovrebbe essere controllato o non controllato ove possibile?
05/08/2021
Alonzo
L'elenco è costituito dalle istanze dello stesso componente? In tal caso, è possibile memorizzare uno stato nel componente ul che riceve i riferimenti dei suoi figli tramite i puntelli di callback o il contesto.

L'esempio del primo modo è mostrato nel tutorial React su MDN, quindi potresti volerlo fare solo per esserci abituato: https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client- side_JavaScript_frameworks / React_getting_started

La parte sugli oggetti di scena di richiamata è in questa sezione: https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_events_state
05/08/2021
Cordier Shenaz
Items.map ((item, key) => <key = {key} your component />

Se è un oggetto allora

Object.values ​​(Items) .map ((item, key) => <key = {key} your component />


Quindi aggiungi useRef da react.

Quindi, all'interno del tuo componente, assegna il rif

const node = useRef ()

E il passaggio in quel nodo a ogni elemento mappato.
Lucchesi Covello
~~ Non direi che questo lo consideri come ultima risorsa, in questo caso sembra che nessuna terapia sia stata discussa o sperimentata, quindi non sarebbe inappropriato trovare un veterinario più ricettivo. Gli specialisti nella mia zona sono stati sommersi quanto il medico di famiglia, quindi se l'OP dovesse passare direttamente allo specialista potrebbero dover aspettare più a lungo per quello ch...

Lascia una recensione