Estoy tratando de mostrar datos (en forma de matriz) usando almacenamiento asíncrono. El registro de datos en la consola funciona, pero cuando pongo los datos en estado e intento mapearlos para mostrarlos, no lo hará. Cualquier ayuda es bienvenida. ¡Gracias! Resultado en el registro de la consola: ["team1", "team2", "team3"] antes de JSON.parse Array [ "team1", "team2", "team3", ] después de JSON.parse
const [favoriteTeams, setFavoriteTeams] = useState([]); const setStorage = async (team) => { let teams = []; try { let storedTeams = await AsyncStorage.getItem('favTeams'); if (storedTeams !== null) { teams = JSON.parse(storedTeams); } teams.push(team) await AsyncStorage.setItem('favTeams', JSON.stringify(teams)); } catch (error) { //error } }; const getStorage = async () => { const teams = await AsyncStorage.getItem('favTeams') if (teams !== null) { setFavoriteTeams(prevState => [...prevState, ...JSON.parse(teams)]) } } useEffect(() => { getStorage() }, []) return ( <View> {favoriteTeams.map((item) => {( <Text>{item}</Text> //console.log(item) works )} )} </View> )La función de devolución de llamada de su map no tiene un valor de retorno, por lo que no aparece ninguno de los contenidos.
Debe eliminar los corchetes o agregar un retorno explícito. Al eliminar los corchetes, su función de flecha devuelve implícitamente una sola expresión.
return ( <View> {favoriteTeams.map((item) => ( <Text>{item}</Text> ))} </View> )Alternativamente, podría mantener los corchetes, en cuyo caso debe devolver explícitamente un valor. La ventaja de los corchetes es que puede tener varias declaraciones en el cuerpo de la función. Mientras que sin ellos solo puedes tener una sola expresión.
return ( <View> {favoriteTeams.map((item) => { return <Text>{item}</Text> })} </View> )Para obtener más información, consulte: Expresiones de función de flecha - Cuerpo de función yFunción de flecha sin llaves