React native 当react native中的数据更改时重新呈现平面列表

我在react原生应用程序中有一个平面列表。此平面列表由一个数组（renderItem）填充。这很有效

当我点击平面列表中的一个项目时，该项目应该消失

const [currentValues, setCurrentValues] = useState([])

// a fetch fills the currentValues-array with data from a 
// database here, this works

<FlatList
data={currentValues}
renderItem={(item, index) => {
    return (
        <TouchableOpacity onPress={() => deleteItem(item.id)} style={{ borderWidth: 1, borderColor: 'black' }}>
            <Text>{item.username}</Text>
        </TouchableOpacity>
    )
}} />

出现以下问题：

删除数组中的项是有效的，因为当我执行console.log时，我看到数组是空的。但是，平面列表不会重新渲染。当我单击某个项目将其删除时，用户名将消失（因为它已从currentValues项目中删除），但该项目本身未被删除，我仍然看到一个带边框的矩形

当我在单击一个项目后重新设置数组时，它会工作，因此平面列表会像应该的那样重新渲染。但是，所有项目都会立即删除（因为我清除了数组），这不是我想要的

我尝试了

extraData

prop。我将此添加到我的平面列表中：

extraData={currentValues}

我想确保在更新currentValues数组时重新呈现平面列表，但这也不起作用

有人知道如何解决这个问题吗

顺便说一句，从FlatList更改为ScrollView是可行的（具有完全相同的功能）。所以我认为这是一个简单的问题

解决方案

解决方案（基于MBach的回答）：

---

尝试使用扩展运算符强制克隆阵列：

let array = [...currentValues]

---

或者您可以将

currentValues

连接到

useffect（）

查看以下答案：非常有用。

const deleteItem = id => {
    let array = [...currentValues]
    let index = array.findIndex(e => e.id === id)
    array.splice(index, 1)
    setCurrentValues([...array])
}

let array = [...currentValues]