Estoy trabajando en una aplicación de gestión del tiempo para un cliente y estoy usando React Native. Cuando el usuario crea una nueva tarea, la información de la tarea se inserta en una matriz de objetos. Es un estado inicial vacío. Pero por alguna razón tengo una tarjeta vacía en ScrollView. Incluso intenté configurar manualmente si el título de la tarea no está vacío y luego devolví el elemento jsx, pero no tuve suerte. Cualquier idea de lo que estoy haciendo incorrectamente.
La función para crear tareas.
Create_Task = () => { let {daily, Title, TaskTime} = this.state; daily.shift(); daily.push({ID: this.makeid(5), TaskName: Title, TaskTime: TaskTime}); this.setState({daily: [...this.state.daily, Title]}); };El estado inicial de la matriz y toda la información.
const initialState = [{ID: '', TaskName: '', TaskTime: ''}]; this.state = { daily: initialState, Title: '', TaskTime: '', }Devolución de elementos JSX
<View style={styles.tasks}> <ScrollView> {this.state.daily.map(x => { if (x.TaskName !== ' '){ return ( <Card style={styles.card} key={x.ID}> <View style={styles.cardView}> <TouchableOpacity style={styles.btnComplete}></TouchableOpacity> <Text style={styles.task_Title}>{x.TaskName}</Text> <Text style={styles.taskTime}>{x.TaskTime}</Text> </View> </Card> ); } })} </ScrollView> </View>Su estado inicial tiene un Objeto en él cuando lo está inicializando. Simplemente inicializar con una matriz vacía debería resolver su problema.
const initialState = []; this.state = { daily: initialState, Title: '', TaskTime: '', }