0
188
VisualizaçõesReact Native Client no puede procesar datos JSON desde una llamada api
Actualmente estoy tratando de crear una aplicación nativa de reacción que busque una API y luego represente esos datos. Sin embargo, no funciona y no sé qué estoy haciendo mal. Mi API devuelve un Objeto que se desconectó correctamente en mi consola. Pero en mi aplicación nativa de reacción real, solo aparece "indefinido" si intento renderizarlo. Aparte de eso, mi consola dice lo siguiente, aunque especifico una clave única en mi componente:
"Warning: Each child in a list should have a unique "key" prop."Aquí está mi código:
export default function MyComponent() { const myData = fetch('(Right URL from API stands here)', { method: 'GET' }) .then(res => res.json()) .then(data => console.log(data)); return ( <View style={styles.container}> { Object.keys(myData).map(data => { return ( <View key={data.id}> <Text>{"Data: " + data.message}</Text> </View> ) }) } </View> ); } const styles = StyleSheet.create({ container: { flex: 1, alignItems: "center", marginTop: 48, } });Aquí está mi consola cerrando sesión en un objeto después de obtener datos:
Array [ Object { "message": "This is a message", "username": "leon42", "id": 1, "timing": "2022-01-01T12:00:00.000Z", }, Object { "message": "This is a message", "username": "henry42", "id": 2, "timing": "2022-01-01T12:00:00.000Z", }, Object { "message": "This is a message", "username": "pauli42", "id": 3, "timing": "2022-01-01T12:00:00.000Z", }, ] Mi componente se ve así en mi teléfono: 
1 Respostas
Responde à pergunta0
Su fetch es asíncrona, por lo tanto, en su primer ciclo de procesamiento, los data no están undefined . La razón por la que se define en su mensaje de registro es porque está utilizando then cadena. Sin embargo, dado que el ciclo de renderizado ya finalizó, la pantalla no reaccionará a la información actualizada.
Cree un estado y actualícelo una vez que la llamada a la API devuelva sus datos. El cambio de estado provocará una nueva representación.
export default function MyComponent() { const [data, setData] = useState() React.useEffect(() => { const fetchData = async () => { const d = await fetch('(Right URL from API stands here)', { method: 'GET' }) setData(d) } fetchData() }, []) return ( <View style={styles.container}> { Object.keys(data).map(item => { return ( <View key={item.id}> <Text>{"Data: " + item.message}</Text> </View> ) }) } </View> ); } const styles = StyleSheet.create({ container: { flex: 1, alignItems: "center", marginTop: 48, } });