Javascript 我不知道'；我不知道渲染为什么不'；我不在办公室工作

此代码是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>
);  
}

导出功能说明（道具）{
返回(
{props.val.date}
{props.val.note}
D
);   
}
导出函数MyqtwriteScreen（{导航，路由}）{
const[noteArray，setNoteArray]=useState（[]）；
const[noteText，setNoteText]=useState（“”）；
让notes=noteArray.map（（val，key）=>{
console.log（'start'）；
返回deleteNote（键）}/>
});
const addNote=（）=>{
如果（注释文本）{
var d=新日期（）；
noteArray.push({
“日期”：d.getFullYear（）+
“/”+（d.getMonth（）+1）+
“/”+d.getDate（）+“+d.getHours（）+”：“+d.getMinutes（），
“note”：noteText，
});
setNoteArray（noteArray）；
setNoteText（“”）；
}
};
常量deleteNote=（键）=>{
注：阵列拼接（图例1）；
setNoteArray（noteArray）；
//setNoteText（“”）；
};
返回(
{notes}
setNoteText（noteText）}
值={noteText}
占位符='>>>注释'
占位符textcolor='gray'
>
+
);  
}

我不知道为什么渲染不起作用！ 我为这个问题挣扎了超过2天。。。

---

请帮助我……

Splice更新实际阵列，对于要重新渲染的组件，阵列应替换为新实例

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

这样，它将指向一个新数组

更改文本时更新的原因是，当状态更新时，文本会导致重新渲染。

---

您也可以考虑使用数组的过滤函数。< /p>如果更新实际数组，重写是否无效？我不认为这会造成问题。谢谢您的回答。不，它应该始终是一个新实例，请这样想，您指向一个引用并更改该引用中的某些内容，这些内容不会被视为更新，因此您必须提供一个新引用：）