Функция обратного вызова onChangeText сохраняет предыдущий ввод
Я новичок в React Native и я пытаюсь создать свое первое приложение для списка дел, используя React Native и JS. я столкнулся с проблемой при проверке этого приложения iam использует textInput, чтобы принять задачу в качестве ввода от пользователя, и iam использует функцию обратного вызова onchangetext
<TextInput style = {styles.input} placeholder = {'Write a task'} value = {task} onChangeText = {text =>{
console.info(text.length)
if (text.length==0){
checkEmpty(true);
setTask(null);
}
else{
checkEmpty(false);
setTask(text);
clearText('');
}
}}/>
и кнопка создать задачу
<TouchableOpacity onPress = {()=>{
handleAddTask();
}}>
<View style = {styles.addWrapper}>
<Text style = {styles.addText}>+</Text>
</View>
</TouchableOpacity>
а это функция 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.info('Alert closed')}
]);
setTask('');
}
}
проблема вот что после первого запуска приложения: если я не ввел никаких данных и нажму на TouchableOpacity, появится всплывающее предупреждение. и после того, как я ввожу любой ввод и добавляю задачу и добавляю ее успешно, когда я снова нажимаю TouchableOpacity, когда ввод пуст, он создает пустую задачу для решения проблемы, я должен ввести любой символ и удалить его и нажать TouchableOpacity, чтобы всплыло предупреждение снова, так как вход пуст ... я хочу знать, как решить эту проблему проверки
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Я попытался поиграть с вашим кодом, и я думаю, что состояние isEmpty работает не так, как ожидалось (вы также не предоставили эту часть кода). Вы можете обновить свой checkEmpty после обновления task.
useEffect(() => {
if (task.length) {
checkEmpty(false)
} else {
checkEmpty(true)
}
},[task])
Но на самом деле вам не нужно назначать другое состояние, чтобы проверить, пусто ли состояние, вы можете просто использовать task.length для проверки.
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.info('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>
);
Проверить - закуска.выставка