Estoy tratando de volver a ejecutar el gancho useEffect en función de si se ha agregado algún elemento nuevo al almacenamiento local.
Mi useEffect se ve así:
useEffect(() => { //getting all localstorage items and setting to a variable const localStorageItems = { ...localStorage } // filtering out the localstorage items for keys that only starts with "HTTP" & pushing it to the state called "testData" using setTestData useState hook. const filteredByKey = Object.fromEntries( Object.entries(localStorageItems).filter(([key, value]) => { if (key.startsWith("http")) { testArr2.push({ urls: [key, value] }) // setTestData({ urls: [key, value] }) setTestData((prev) => [...prev, { key, value }]) } }) ) }, [])Mi problema es cuando presiono un botón (agregando nuevos datos), este useEffect idealmente debería volver a ejecutarse, configurando los últimos datos en el estado "testData".
El problema :
window.localstorage a la lista de dependencias de matriz de useEffect, ya que es una variable externa que creo y reacciono no lo permite.Lo que he probado:
Por favor ayuda. Gracias por leer hasta aquí.
Puedo darle una solución para este caso de uso, crear un contexto de reacción que se sincronice con localStorage . puede usar el contexto como una dependencia useEffect . sincronizar significa tomar el valor de localStorage al inicio y actualizar el contexto junto con localStorage desde su aplicación.
Defina un estado que contenga el valor de almacenamiento local y páselo como un parámetro useEffect.
const [localStorageData, setLocalStorageData] = useState([]); useEffect(() => { // Your codes }, [localStorageData])puede usar el detector de eventos 'almacenamiento'
window.addEventListener('storage', function(e) { if (e.newValue) { console.log('new data is saved ...') // ...... your code } })