soy nuevo en react native y trato de crear mi primera aplicación de lista de tareas usando react native y js tuve un problema en la validación de esta aplicación iam usando un textInput para tomar la tarea como entrada del usuario y iam usando la función de devolución de llamada onchangetext
<TextInput style={styles.input} placeholder={'Write a task'} value={task} onChangeText={text =>{ console.log(text.length) if(text.length==0){ checkEmpty(true); setTask(null); } else{ checkEmpty(false); setTask(text); clearText(''); } }}/>y un boton para crear la tarea
<TouchableOpacity onPress={()=>{ handleAddTask(); }}> <View style={styles.addWrapper}> <Text style={styles.addText}>+</Text> </View> </TouchableOpacity>y esta es la función handleAddTask
const handleAddTask=()=>{ Keyboard.dismiss(); if(isEmpty==false){ setTaskItems([...taskItems,task]) setTask(''); } else{ Alert.alert('OOPS!','Todos must contain at least 1 character',[ {text:'Okay', onPress: ()=> console.log('Alert closed')} ]); setTask(''); } }el problema aquí es que después de que la aplicación se inicie por primera vez : si no ingresé ninguna entrada y presioné TouchableOpacity, aparece la alerta y después de ingresar cualquier entrada y agregar una tarea y agregarla con éxito cuando presiono TouchableOpacity nuevamente cuando la entrada está vacía crea una tarea vacía para resolver el problema debo escribir cualquier carácter y eliminarlo y presionar TouchableOpacity para que la alerta vuelva a aparecer ya que la entrada está vacía... quiero saber cómo resolver este problema de validación
Intenté jugar con tu código y creo que el estado isEmpty no funciona como se esperaba (tampoco expusiste esa parte del código). Puede actualizar su checkEmpty después de actualizar la task .
useEffect(() => { if(task.length) { checkEmpty(false) } else { checkEmpty(true) } },[task]) Pero, en realidad, no necesita asignar otro estado para verificar si el estado está vacío, solo puede usar task.length para verificar.
const [task, setTask] = React.useState(''); const [taskItems, setTaskItems] = React.useState([]) const handleAddTask=()=>{ // Keyboard.dismiss(); if(task){ setTaskItems(prev => [...prev,task]) setTask(''); } else{ Alert.alert('OOPS!','Todos must contain at least 1 character',[ {text:'Okay', onPress: ()=> console.log('Alert closed')} ]); // setTask(''); } } return ( <View style={styles.container}> <TextInput placeholder={'Write a task'} value={task} onChangeText={(text) => setTask(text)} /> <TouchableOpacity onPress={() => { handleAddTask(); }}> <View style={{margin : 5}}> <Text style={{fontSize: 24}}>+</Text> </View> </TouchableOpacity> {taskItems.length ? taskItems.map(t=> <Text style={styles.paragraph}>{t}</Text>) : undefined} </View> );Verifique - snack.expo