输出未按预期在屏幕上更改 我的代码如下:
import React, { useState } from "react";
import { StyleSheet, FlatList, View } from "react-native";
import ListItem from "../components/ListItem";
import colors from "../config/colors";
import Screen from "../components/Screen";
import ListItemSeperator from "../components/ListItemSeperator";
import ListItemDeleteAction from "../components/ListItemDeleteAction";
const InitialMessages = [
{
id: 1,
title: "T1",
description: "D1",
image: require("../assets/Images/mosh.jpg"),
},
{
id: 2,
title: "T2",
description: "D2",
image: require("../assets/Images/mosh.jpg"),
},
{
id: 3,
title: "T3",
description: "D3",
image: require("../assets/Images/mosh.jpg"),
},
];
function MessagesScreen(props) {
const [messages, UpdateMessageArray] = useState(InitialMessages);
const handlerDelete = (message) => {
console.log("Came to Delete");
const newArr = messages.filter((m) => m.id !== message.id);
UpdateMessageArray(newArr);
};
return (
<Screen>
<FlatList
data={InitialMessages}
keyExtractor={(message) => message.id.toString()}
renderItem={({ item }) => (
<ListItem
title={item.title}
subTitle={item.description}
image={item.image}
onPress={() => console.log("MESSAGE PRESSED", item)}
renderRightActions={() => (
<ListItemDeleteAction onPress={() => handlerDelete(item)} />
)}
/>
)}
ItemSeparatorComponent={ListItemSeperator}
/>
</Screen>
);
}
const styles = StyleSheet.create({});
export default MessagesScreen;
在控制台上..它输出为“ CAME TO DELETE”,每次删除后我也记录了initialMessages数组...我看到它已更新但不在屏幕上。 知道为什么它不起作用吗?
答案 0 :(得分:0)
FlatList是 PureComponent 。
它需要一个道具,为了重新渲染它需要对其进行更改。您将data
道具设置为InitialMessages
而不是messages
,因此状态不会改变。
请设置您的数据道具为messages
状态,否则请使用extraData道具传递一些可以更改的状态。
import React, { useState } from "react";
import { StyleSheet, FlatList, View } from "react-native";
import ListItem from "../components/ListItem";
import colors from "../config/colors";
import Screen from "../components/Screen";
import ListItemSeperator from "../components/ListItemSeperator";
import ListItemDeleteAction from "../components/ListItemDeleteAction";
const InitialMessages = [
{
id: 1,
title: "T1",
description: "D1",
image: require("../assets/Images/mosh.jpg"),
},
{
id: 2,
title: "T2",
description: "D2",
image: require("../assets/Images/mosh.jpg"),
},
{
id: 3,
title: "T3",
description: "D3",
image: require("../assets/Images/mosh.jpg"),
},
];
function MessagesScreen(props) {
const [messages, UpdateMessageArray] = useState(InitialMessages);
const handlerDelete = (message) => {
console.log("Came to Delete");
const newArr = messages.filter((m) => m.id !== message.id);
UpdateMessageArray(newArr);
};
return (
<Screen>
<FlatList
data={messages}
keyExtractor={(message) => message.id.toString()}
renderItem={({ item }) => (
<ListItem
title={item.title}
subTitle={item.description}
image={item.image}
onPress={() => console.log("MESSAGE PRESSED", item)}
renderRightActions={() => (
<ListItemDeleteAction onPress={() => handlerDelete(item)} />
)}
/>
)}
ItemSeparatorComponent={ListItemSeperator}
/>
</Screen>
);
}
const styles = StyleSheet.create({});
export default MessagesScreen;
参考文献1:https://reactnative.dev/docs/flatlist.html
参考文献2:Why FlatList is not updating dynamically in React Native