Recientemente comencé a estudiar React Native. Ahora trato de mostrar una matriz de objetos en la página. Hice todo como si estuviera bien, pero me sale un error:
Undefined is not an object (evaluating 'task.name'Tengo dos preguntas, ¿qué estoy haciendo mal y por qué en React Native, los elementos se muestran usando FlatList y no a través del método del mapa? Aquí está mi fragmento de código:
import React, {useState} from "react"; import {FlatList, StyleSheet, Text, View} from "react-native"; export default function Tasks() { const [tasks, setTasks] = useState([ {id: 1, name: "By Bread"}, {id: 2, name: "By pizza"}, {id: 3, name: "By snack"} ]) return (<View> <FlatList data={tasks} renderItem={({task}) => ( <Text key={id}>{task.name}</Text> )}/> </View>) } const styles = StyleSheet.create({})Tiene una key = {id} en su Text , y no hay una identificación definida en este punto. Y te falta el keyExtractor de FlatList . También en su renderItem , use item en lugar de task .
Prueba con esto:
import React, {useState} from "react"; import {FlatList, StyleSheet, Text, View} from "react-native"; export default function Tasks() { const [tasks, setTasks] = useState([ {id: 1, name: "By Bread"}, {id: 2, name: "By pizza"}, {id: 3, name: "By snack"} ]) return ( <View> <FlatList data={tasks} renderItem={({item}) => (<Text keyExtractor={item => item.id}>{item.name}</Text>)} /> </View> ) } const styles = StyleSheet.create({})