useState 没有在 React-Native 的屏幕上更新

Question

屏幕上的输出没有按预期变化 我的代码如下：

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 数组...我看到它得到了更新但没有显示在屏幕上。 知道为什么它不起作用吗？？

Answer 1

FlatList 是一个 PureComponent。

它需要一个 props，它被更改为 re-render。您将 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