Javascript 如何在可触摸按键上重新渲染React本机平面列表？

大家好

我正在为我的节点API构建一个前端（列出、上传、删除和播放文件），当按下按钮（TouchableOpacity）时，我试图获得一个平面列表来重新渲染，该按钮将包含我将来从API返回的文件列表

根据我在阅读了几个示例代码和线程后的理解，需要在FlatList的extraData选项中传递一个状态变量，当该变量更新时，列表应该重新呈现

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

我的代码：

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>
    );
}

从“世博会状态栏”导入{StatusBar}；
从“React”导入React，{useState}；
进口{
看法
安全区域视图，
平面列表，
样式表，
文本，
形象,，
可触摸不透明度，
}从“反应本族语”；
让数据=[
{
标题：“Gojira-Magma（官方音频）.mp3”，
键：“0”
},
{
标题：“Gojira-Magma（官方音频）.mp3”，
键：“1”
},
{
标题：“Gojira-Magma（官方音频）.mp3”，
键：“2”
},
{
标题：“Gojira-Magma（官方音频）.mp3”，
键：“3”
},
];
常量项=（{title}）=>(
{title}
);
导出默认函数App（）{
常量renderItem=（{item}）=>；
const[newData，setNewData]=useState（null）；
常数onRefresh=（）=>{
让新的_数据=[]；
for（让我输入数据）{
new_data.push({
标题：数据[i]。标题+“新建”，
key:DATA[i].key
});
}
setNewData（新数据）；
//console.log（新的_数据）；
}
返回(
item.key}
/>
);
}

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

---

提前谢谢

如果希望平面列表显示刚才添加的数据，则应将硬编码数据设置为初始状态，并根据需要对其进行操作

从“世博会状态栏”导入{StatusBar}；
从“React”导入React，{useState}；
进口{
看法
安全区域视图，
平面列表，
样式表，
文本，
形象,，
可触摸不透明度，
}从“反应本族语”；
让数据=[
{
标题：“Gojira-Magma（官方音频）.mp3”，
键：“0”
},
{
标题：“Gojira-Magma（官方音频）.mp3”，
键：“1”
},
{
标题：“Gojira-Magma（官方音频）.mp3”，
键：“2”
},
{
标题：“Gojira-Magma（官方音频）.mp3”，
键：“3”
},
];
常量项=（{title}）=>(
{title}
);
导出默认函数App（）{
常量renderItem=（{item}）=>；
const[newData，setNewData]=使用状态（数据）；
常数onRefresh=（）=>{
让新的_数据=[]；
for（让我输入数据）{
new_data.push({
标题：数据[i]。标题+“新建”，
key:DATA[i].key
});
}
setNewData（新数据）；
//console.log（新的_数据）；
}
返回(
item.key}
/>
);
}

哦，哇，好吧，我甚至不知道这是一个选项，我想我必须了解更多关于这个国家的事情。。。非常感谢你！