如何解决useState未在React-Native中在屏幕上更新
输出未按预期在屏幕上更改 我的代码如下:
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",{
id: 3,title: "T3",description: "D3",];
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数组...我看到它已更新但不在屏幕上。 知道为什么它不起作用吗?
解决方法
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",{
id: 3,title: "T3",description: "D3",];
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
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。