如何在 Touchable press 上重新渲染 React Native FlatList？

Question

大家好,

我正在为我的 Node API 构建一个前端（列出、上传、删除和播放文件），我正在尝试获得一个 FlatList 在按下按钮 (TouchableOpacity) 时重新呈现，其中将包含我从 API 中返回的文件列表未来。

根据我阅读几个示例代码和线程后的理解，需要在 FlatList 的 extraData 选项中传递一个 state 变量，当这个变量更新时，List 应该重新-渲染。

我显然错过了一些东西，因为我对这个“系统”的实施不起作用，如果有人能指导我正确的方向，我将不胜感激。

我的代码：

import { StatusBar } from "expo-status-bar";
import React, { useState } from "react";
import {
    View,
    SafeAreaView,
    FlatList,
    StyleSheet,
    Text,
    Image,
    TouchableOpacity,
} from "react-native";

let DATA = [
    {
        title: 'Gojira - Magma (Official Audio).mp3',
        key: "0"
    },
    {
        title: 'Gojira - Magma (Official Audio).mp3',
        key: "1"
    },
    {
        title: 'Gojira - Magma (Official Audio).mp3',
        key: "2"
    },
    {
        title: 'Gojira - Magma (Official Audio).mp3',
        key: "3"
    },
];

const Item = ({ title }) => (
    <View style={styles.item}>
        <Text style={styles.title}>{title}</Text>
    </View>
);

export default function App() {
    const renderItem = ({ item }) => <Item title={item.title} />;

    const [newData, setNewData] = useState(null);

    const onRefresh = () => {
        let new_data = [];
        for (let i in DATA) {
            new_data.push({
                title: DATA[i].title + " NEW",
                key: DATA[i].key
            });
        }
        setNewData(new_data);
        //console.log(new_data);
    }

    return (
        <SafeAreaView style={styles.container}>

            <FlatList style={styles.list_wrapper}
                data={DATA}
                extraData={newData}
                renderItem={renderItem}
                keyExtractor={(item, index) => item.key}
            />

            <SafeAreaView style={styles.btn_wrapper}>
                <TouchableOpacity style={styles.refreshBtn} activeOpacity={1} onPress={onRefresh}>
                    <Image
                        source={require('./assets/refresh.png')}
                        style={styles.refresh}
                    />
                </TouchableOpacity>
            </SafeAreaView>
        </SafeAreaView>
    );
}

我没有包含样式部分，请告诉我是否应该包含。

提前致谢！

Answer 1

如果您希望 FlatList 显示您刚刚添加的数据，您应该将硬编码数据设置为初始状态并根据需要对其进行操作。

import { StatusBar } from "expo-status-bar";
import React, { useState } from "react";
import {
    View,
    SafeAreaView,
    FlatList,
    StyleSheet,
    Text,
    Image,
    TouchableOpacity,
} from "react-native";

let DATA = [
    {
        title: 'Gojira - Magma (Official Audio).mp3',
        key: "0"
    },
    {
        title: 'Gojira - Magma (Official Audio).mp3',
        key: "1"
    },
    {
        title: 'Gojira - Magma (Official Audio).mp3',
        key: "2"
    },
    {
        title: 'Gojira - Magma (Official Audio).mp3',
        key: "3"
    },
];

const Item = ({ title }) => (
    <View style={styles.item}>
        <Text style={styles.title}>{title}</Text>
    </View>
);

export default function App() {
    const renderItem = ({ item }) => <Item title={item.title} />;

    const [newData, setNewData] = useState(DATA);

    const onRefresh = () => {
        let new_data = [];
        for (let i in DATA) {
            new_data.push({
                title: DATA[i].title + " NEW",
                key: DATA[i].key
            });
        }
        setNewData(new_data);
        //console.log(new_data);
    }

    return (
        <SafeAreaView style={styles.container}>

            <FlatList style={styles.list_wrapper}
                data={newData} 
                renderItem={renderItem}
                keyExtractor={(item, index) => item.key}
            />

            <SafeAreaView style={styles.btn_wrapper}>
                <TouchableOpacity style={styles.refreshBtn} activeOpacity={1} onPress={onRefresh}>
                    <Image
                        source={require('./assets/refresh.png')}
                        style={styles.refresh}
                    />
                </TouchableOpacity>
            </SafeAreaView>
        </SafeAreaView>
    );
}

如何在 Touchable press 上重新渲染 React Native FlatList？

How to re-render React Native FlatList on Touchable press?

javascript

node.js

reactjs

react-native

react-native-flatlist