Cuando se actualiza el almacenamiento local, trato de hacer que el texto de un elemento cambie a lo que contiene el almacenamiento local. Esto funciona y el elemento cambia cuando recargo la página, sin embargo, lo necesito para que se actualice sin recargar.
Escuché sobre useState y useEffect, pero debido a mi conocimiento limitado, no sé cómo se implementarían o podrían implementarse.
La ayuda sería apreciada.
function appers(){ const { ipcRenderer } = window.require("electron"); ipcRenderer.send('execMain') ipcRenderer.on('exec_details',(e,val)=>{ let itemzz = val; let drops = itemzz.slice(3) let dropAPI = JSON.parse(drops) let firstItemTitle = dropAPI[0]["item"].toString() let firstItemImage = dropAPI[0]["add"].toString() let firstItemDate = dropAPI[0]["date"].toString() let arr1 = [] arr1.push(firstItemTitle, firstItemAdd, firstItemDate) localStorage.setItem('item1', JSON.stringify(arr1)) }) } function MyFunc(){ let item1Name = JSON.parse(localStorage.getItem('item1'))[0] return( <div> <Button onClick={appers}></Button> <p>{item1Name}</p> </div> ) } export default MyFunc;primero, necesita un estado para almacenar sus datos, puede usar useState para eso.
es un gancho que le permite tener una variable de estado en componentes funcionales
const [data, setData] = useState({ triggerUpdate: false, })segundo, necesitas como mencionas, useEffect. Tiene múltiples funcionalidades, pero conseguiré la que necesitas.
useEffect(() => { if(data.triggerUpdate) { let items = <your data here> setData({ items: items, triggerUpdate: false }) } }, [triggerUpdate])la última línea entre corchetes es matriz de dependencia, lo que significa que useEffect solo activará cualquiera de los cambios de variable de la matriz de dependencia.
si lo deja vacío, solo funcionará en el primer procesamiento; si elimina la matriz de dependencias, funcionará en todos los procesamientos, pero no lo queremos en este caso
editar: puede usar un valor booleano para actualizar su procesamiento y establecerlo en falso para no causar un procesamiento infinito
En reaccionar, debe tener un estado para volver a procesar el componente. Su estructura de código debe ser como
//aparece la función debe devolver el valor return arr1
function MyFunc = () => { const [item1Name , setitem1Name] = useState(null) let item1Name = JSON.parse(localStorage.getItem('item1'))[0] const handleAppearance = () => { setitem1Name(appear()) } return( <div> <Button onClick={handleAppearance}></Button> <p>{item1Name}</p> </div> ) }