我不知道为什么渲染在反应中不起作用

Question

此代码为TODO APP，可添加、删除便签。但是，当我运行这段代码时，它可以使用 'Add' 功能，但是当我尝试删除笔记时，它不会立即删除笔记。当我在 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 天...... 请帮助我.....

Answer 1

Splice 更新实际数组，对于重新渲染数组的组件应该用新实例替换。

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

这样它将指向一个新的数组。

它在您更改文本时更新的原因是文本会在状态更新时导致重新渲染。也可以考虑使用数组的过滤功能

我不知道为什么渲染在反应中不起作用

I don't know why rendering doesn't work in react

javascript

components

render

reactjs

react-native