Refresh FlatList React

Question

删除工作后未显示在屏幕上的flatList项不改变

const App = () => {
const data = [
{ id: 1, text: "item One" },
{ id: 2, text: "item Two" },
{ id: 3, text: "item Three" },
{ id: 4, text: "item Four" },
];
const [state, setState] = useState(data);
const onPressItem = (id) => {
// code de delete item
const data = state;
alert(id);
const filterrArray = data.filter((val, i) => {
if (val.id !== id) {
return val;
}
});
console.log("filteerArray " , filterrArray)
setState( filterrArray)
};
const renderItem = ({ item }) => {
return (
<TouchableOpacity style={styles.item}>
<Text style={styles.text}>{item.text}</Text>
<Button title="Supprimer" onPress={() => onPressItem(item.id)} />
</TouchableOpacity>
);
};

const handleCheck = () => { 
console.log('__________________________')
console.log(state)
}
return (
<View style={{ flex: 1, padding: 0, marginTop: "10%" }}>
<SafeAreaView>
<FlatList
data={data}
keyExtractor={(item) => item.id}
renderItem={renderItem}
/>
</SafeAreaView>
<Button
title = "Verifier state"
onPress={handleCheck}
/> 
</View>
);
};

之前每次我试着控制台日志删除,删除后工作好但作改变屏幕上或自动刷新我不知道

Answer 1

不确定我是否得到了你的问题，但如果你想更新你的flatlist，你需要将状态传递给数据。data={state}