Entonces, cuando los visitantes visitan por primera vez, si no tienen la información que necesito en localStorage, debería configurarlos y luego obtener los datos. Pero el problema es que se muestra como nulo cuando busco los datos. Intenté asíncrono pero no lo sé.
Básicamente, quiero que todo el almacenamiento local y el estado se establezcan antes de que se ejecuten las funciones getData.
useEffect(() => { (async function () { try { if (localStorage.getItem('language') === null) { localStorage.setItem('language', 'en'); setLanguage('en') } if (localStorage.getItem('view') === null) { localStorage.setItem('view', 'verses'); setView('verses'); } getData(`${view}_${language}`); } catch (e) { console.error(e); } })(); }, []);Aquí está la función que llama:
const getData = async (where) => { try { const { data: content, error } = await supabase .from(where) .select('*') if (error) throw error; if (content) { const randomizer = content[Math.floor(Math.random() * content.length)]; setContent(randomizer); } } catch (error) { alert(error.error_description || error.message) } finally { // console.log(content.content) } }y aquí están los estados:
const [view, setView] = useState(null); const [language, setLanguage] = useState(null); const [content, setContent] = useState(null);No importa si los mantiene dentro del asíncrono, la actualización de estado en sí es asíncrona, tal vez pueda hacer lo siguiente:
const [language, setLanguage] = useState(localStorage.getItem('language') || 'en'); useEffect(() => { localStorage.setItem('language', language); }, [language]) // and same for view useEffect(() => { if(language && view) { getData(`${view}_${language}`); } }, [language, view])Supongo que estos estados, el idioma y la vista, se cambian de alguna manera en su aplicación; de lo contrario, lo más probable es que no necesite mantenerlos en estado.