This code is TODO APP which can add, and delete Note. However, when I run this code, It works 'Add' function , but when I try to delete note, It doesn't delete the note immediately. And when I write any word on TextInput, then it deletes the note that I tried to delete.
export function Note(props){
return (
<View>
<View>
<Text>{props.val.date}</Text>
<Text>{props.val.note}</Text>
</View>
<TouchableOpacity onPress={props.deleteMethod}>
<Text>D</Text>
</TouchableOpacity>
</View>
);
}
export function MyqtwriteScreen({ navigation, route }) {
const [noteArray, setNoteArray] = useState([]);
const [noteText, setNoteText] = useState('');
let notes = noteArray.map((val, key) => {
console.log('start');
return <Note key={key} keyval={key} val={val}
deleteMethod={() => deleteNote(key)} />
});
const addNote = ()=>{
if (noteText) {
var d = new Date();
noteArray.push({
'date': d.getFullYear() +
"/" + (d.getMonth() + 1) +
"/" + d.getDate() + " " + d.getHours() + ":" + d.getMinutes(),
'note': noteText,
});
setNoteArray(noteArray);
setNoteText('');
}
};
const deleteNote = (key)=> {
noteArray.splice(key, 1);
setNoteArray(noteArray);
// setNoteText('');
};
return (
<View style={styles.container}>
<View>
{notes}
</View>
<TextInput
onChangeText={(noteText) => setNoteText(noteText)}
value={noteText}
placeholder='>>>note'
placeholderTextColor='gray'
></TextInput>
<TouchableOpacity onPress={addNote}>
<Text>+</Text>
</TouchableOpacity>
</View>
);
}
I don't know why rendering doesn't work! I'm struggling this problem for over 2days... Please Help me.....
Splice updates the actual array, for a component to rerender the array should be replaced by a new instance.
const deleteNote = (key)=> {
const newArray=[...noteArray];
newArray.splice(key, 1);
setNoteArray(newArray);
};
By this it will be pointed to a new array.
The reason for it to update when you change the text is the text causes a re render as the state is updated. You can also consider using the filter function of the array.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.