Блог

Этот код является приложением TODO, которое может добавлять и удалять заметки. Однако, когда я запускаю этот код, срабатывает функция «Добавить» , но когда я пытаюсь удалить заметку, она удаляет заметку не сразу. И когда я пишу любое слово в TextInput, оно удаляет заметку, которую я пытался удалить.

 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>
);  
}
  

Я не знаю, почему рендеринг не работает!
Я борюсь с этой проблемой более 2 дней…
Пожалуйста, помогите мне…..

Splice обновляет фактический массив, для компонента для повторного отображения массив должен быть заменен новым экземпляром.

 const deleteNote = (key)=> {
    const newArray=[...noteArray];
    newArray.splice(key, 1);
    setNoteArray(newArray);    
};
  

Этим он будет указан на новый массив.

Причина, по которой он обновляется при изменении текста, заключается в том, что текст вызывает повторный рендеринг при обновлении состояния. Вы также можете рассмотреть возможность использования функции фильтрации массива.