0
149
Viewsreaccionar useEffect asíncrono provocando otro problema ¿cómo lo resuelven ustedes?
useEffect(()=>{ // console.log(`Ahanda items`,items) setItems(JSON.parse(localStorage.getItem(`baskets`)) ) },[]) useEffect(()=>{ localStorage.setItem(`baskets`,`${JSON.stringify(items)}`) },[items])Hola, tengo un problema asincrónico clásico. el problema es que hay una cesta para el sitio de compras de comercio electrónico cesta simple que quiero cuando el sitio se está actualizando si el almacenamiento local dentro tiene alguna lista de elementos del producto pull y setItem pero el problema son los otros elementos en los que funciona Useeffect. Entonces, si agrego tiempo de espera y hago eso:
useEffect(()=>{ // console.log(`Ahanda items`,items) setItems(JSON.parse(localStorage.getItem(`baskets`)) ) },[]) useEffect(()=>{ setTimeout(() => { localStorage.setItem(`baskets`,`${JSON.stringify(items)}`) }, 200); },[items])pero el problema no se resuelve porque algunas veces puedo usar api
aquí hay otra explicación https://www.youtube.com/watch?v=-mTvd1O-3nM
2 answers
Answer question0
Puede que me equivoque en la pregunta. Pero por favor corrígeme. Estás buscando algo como esto ????
const[items, setItems] = useState([]) function handleFetchItems(){ if(localStorage.baskets){ //call this only if I have items setItems(state =>[...state,...JSON.parse(localStorage.getItem(`baskets`))] } fetch(`url`).then((response) => { //async operation setItems(state =>[...state,...response]) }).catch(() => {}) } useEffect(useCallback(() => {handleFetchItems()},[]))0
Ya enfrenté este problema y lo resuelvo haciendo un gancho personalizado:
por cierto, este gancho personalizado fue creado por Kent, creador de Remix, puedes consultarlo aquí: https://github.com/kentcdodds/react-hooks
uso:
const [name, setName] = useLocalStorageState({ defaultValue: 'default value', key: 'name', })- nombre es el valor almacenado bajo la clave 'nombre' en localStorage
- setName es el setter de los nuevos datos en la clave 'nombre' en localStorage