Estoy tratando de construir una matriz secundaria anidada en una matriz de datos, las entradas de usuario onClick no se guardan en localStorage en tiempo real, pero
Por ejemplo, hay 4 botones con 4 entradas de usuario diferentes 1,2,3,4 Si el usuario hace clic en 1, luego hace clic en 2, entonces la entrada de elección 1 se almacena en el almacenamiento local, lo que significa que mi función no la configura en tiempo real hasta que el usuario haga clic en el siguiente evento o dos veces.
Estados relacionados
const deviceReport = localStorage.getItem('deviceReport') ? JSON.parse(localStorage.getItem('deviceReport')) : [] // this is in the parent component const [data, setData] = useState(deviceReport) // this one placed in parent component and I'm passing in child component as parameter. const [childData, setChildData] = useState([]) // Ese estado se coloca en el componente hijo
childArrayHandler
const childArrayHandler = (sub, questionId) => { const hasId = childData.find(({ id }) => sub.id === id) // copy data to mutable object if (!hasId) { let newData = [...childData] newData = [...newData, { id: sub.id, sub_question: sub.sub_question, weightage: sub.weightage }] setChildData(newData) } // find parent of the child const parent = data.find(({ parentId }) => questionId === parentId) // find index of parent const indexOfParent = data.indexOf(parent) // update data with child related to parent let newData = [...data] newData[indexOfParent].child = childData localStorage.setItem('deviceReport', JSON.stringify(newData)) // Here is a issue , onDataChange(newData) // Updating the data in parent component state of data } Quiero actualizar deviceReport que está en localStorage , usando la función childArrayHandler Esta línea
localStorage.setItem('deviceReport', JSON.stringify(newData))Dos no actualizó el almacenamiento en tiempo real y hasta que el usuario presione dos veces o haga clic en otro botón en la opción. Por favor, ayúdame a arreglar esto.
Creo que localStorage.setItem está sincronizado; por lo tanto, actualizará su estado en tiempo real. Sin embargo, es posible que no se recalcule correctamente, ya que no es un state en reacción.
Para evitar esto, puede usar useLocalStorageState en ahooks en lugar de configurarlo manualmente:
https://ahooks.js.org/hooks/use-local-storage-state
Si desea administrar el estado en el almacenamiento local manualmente, puede hacer algo como esto:
const [deviceReport, setDeviceReport] = useState([]); // Try to retrieve from localstorage on init useEffect(() => { try { let tmp = JSON.parse(localStorage.getItem('deviceReport')) setDeviceReport(tmp); } catch { } }, []) // Set to localstorage when deviceReport change useEffect(() => { localStorage.setItem('deviceReport', JSON.stringify(deviceReport)) }, [deviceReport])