我有一个渲染项,它为每个对象列出一行,并使用 TouchableOpacity 的 onPress 方法调用函数并更新状态:
const renderItem = ({ item }) => (
<View style={styles.listItem}>
<Text style={styles.studentName}>{item.name}</Text>
<View style={styles.statusSection}>
<Text style={styles.loginDate}>Last Logged: {new Date(item.loginDate).toLocaleTimeString()}</Text>
<TouchableOpacity onPress={() => updateStudent(item, selectedTab)}>
<Icon
name={displayIconName(item.status)}
type={item.status === 3 ? "entypo" : "font-awesome"}
size={30}
color={item.status === 3 ? "red" : item.status === 1 ? "green" : "gold"}
/>
</TouchableOpacity>
</View>
</View>
);
调用时,状态会正确更新,但 UI 不会重新呈现。当点击其他元素时,UI 会更新到正确的状态,这是应该的,但这里的问题是当状态立即更新时它不会重新呈现:
function updateStudent(item, tab) {
let currentStudents = students;
let studentToUpdate = item;
const idx = currentStudents.findIndex((value) => {
return value.uid === item.uid;
});
if (studentToUpdate.status === 4) {
studentToUpdate.status = 0
} else {
studentToUpdate.status++
}
currentStudents[idx] = studentToUpdate
currentStudents.sort((a, b) => { return a.status - b.status })
console.log(currentStudents === students) // -> Evaluates to True
setStudents(currentStudents)
}
这里发生了什么,应该如何修复?