Estoy usando almacenamiento asíncrono para recuperar mis datos, pero ¿cómo lo uso con useState()?
Ejemplo:
async function getdata(){ let d= await AsyncStorage.getItem('Name'); return d; } export default function App() { const [name, setName] = useState(() => getdata()); return (<View>...</View>) }pero esto no funciona ya que getdata() es asíncrono, entonces, ¿cómo resuelvo este problema?
Editar:
Olvidé mencionar que probé el gancho useEffect() de esta manera:
async function getdata(){ let d= await AsyncStorage.getItem('Name'); console.log('retrieved Data!'); return d; } const [name, setName] = useState(()=>0); useEffect(() => { getData().then(setName); console.log('moving on...'); }, []);pero el orden de ejecución fue:
'Hacia adelante...'
'¡Datos recuperados!'
donde como debería haber sido al revés
Inicializará su estado en algún valor vacío. Tal vez una cadena vacía, tal vez un valor nulo. Si lo desea, puede hacer que su componente represente algo diferente durante este tiempo, como un indicador de carga. Luego, una vez que se cargan los datos, puede configurar el estado para que se renderice nuevamente.
export default function App() { const [name, setName] = useState(null); useEffect(() => { getData().then(value => setName(value)); }, []); if (name === null) { return <Text>Loading...</Text> } else { return (<View>...</View>) } }Tienes que usar useEffect
export default function App() { const [name, setName] = useState(''); useEffect(() => { const bootstrap = async () => { const name = await getdata(); setName(name); }; bootstrap(); }, []); return <View>...</View>; }Creo que la mejor solución aquí es inicializar el nombre como falso y luego usar 'setName' en una devolución de llamada .then(). setName (y esas funciones de establecimiento que salen de useState en general) pretende ser una forma de actualizar ese valor de forma asíncrona.
Estoy configurando el nombre para el booleano 'falso' aquí y lo verifico estrictamente. Si hay un caso en el que ese campo de nombre está vacío, puede establecerse en una cadena vacía sin causar un bucle infinito.
async function getdata(){ let d= await AsyncStorage.getItem('Name'); return d; } export default function App() { const [name, setName] = useState(false); useEffect(() => { if (name === false) { getData().then((name) => { setName(name); }); } }, []); return (<View>...</View>) }Tenga en cuenta que su vista debe poder tratar con un valor de nombre falso. Cómo lo hace depende de usted.
^^^La solución anterior debería resolver su problema de manera efectiva, pero haré una nota rápida aquí: si su componente es relativamente complejo, podría volver a renderizarse varias veces por otras razones y, en consecuencia, ejecutará if(name == = falso) mientras espera que se resuelva la devolución de llamada. Esto no romperá las cosas, pero dañará el almacenamiento asíncrono más de lo necesario y podría afectar el rendimiento. Si encuentra que ese es el caso, consulte las devoluciones de llamada 'antirrebote' utilizando el útil artículo a continuación. https://medium.com/@gabrielmickey28/using-debounce-with-react-components-f988c28f52c1