如何解决我不知道为什么反应中的渲染不起作用
此代码是可以添加和删除注释的TODO APP。但是,当我运行这段代码时, 它可以使用“添加”功能,但是当我尝试删除便笺时,不会立即删除便笺。当我在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);
};
这样,它将指向一个新数组。
更改文本时更新的原因是文本会随着状态更新而重新呈现。 您还可以考虑使用数组的过滤器功能。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。