Tengo una lista de elementos en los que quiero mostrar un cargador y ocultarlo al completar cierta acción.
Por ejemplo, aquí está mi matriz de elementos
[ { "id": "69f8f183-b057-4db5-8c87-3020168307c5", "loading": null }, { "id": "30d29489-0ba9-4e00-bc28-8ad34ff1a285", "loading": true }, { "id": "5f54ebbd-d380-4a54-bb1d-fc6c76dd1b72", "loading": false } ] Estoy agregando un elemento a la matriz con un valor de loading como null , el motivo es. Quiero procesar tan pronto como se actualice el estado, por lo tanto, estoy usando useEffect hook para observar cualquier cambio, si se agrega algún elemento nuevo con un valor de loading null , entonces procedo a la acción.
Mi problema es que cuando trato de modificar un solo valor de loading a false , me da un comportamiento extraño y establece todos los valores de loading en false .
Lo que quiero tener, cuando cambio el valor de carga de un solo elemento en la matriz, entonces la interfaz de usuario debería volver a mostrarse solo para el elemento modificado.
Si desea ver el violín con un ejemplo de trabajo, aquí está el enlace https://codesandbox.io/s/d8lh4-d8lh4
¿Dónde me estoy equivocando aquí?
Es simple usar este código:
setTimeout(() => { setItems((existingItems) => existingItems.map((item) => item.id === newItem?.id ? { ...item, loading: false } : item ) ); }, 2000);Mirando su código, creo que el problema está relacionado con el acceso al valor incorrecto de newItem y items en setTimeout. Ambos se pueden resolver haciendo algo similar a lo que se muestra a continuación.
const handleUpload = newItem => { // set loading to false to new item after 2 seconds setTimeout( theNewItem => { setItems(exisitingItems => exisitingItems.map(item => item.id === theNewItem.id ? { ...item, loading: false } : theNewItem, ), ); }, 2000, newItem, ); };Tiene dependencia [items] en su useEffect , que está llamando a setItems en bucle en su función handleUpload .