Question

我在本机应用程序中有一个列表。该平面列表中填充了一个数组（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>
    )
}} />

通过以下功能，我从数组中删除了该项目：

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

发生以下问题：

删除数组中的项目是可行的，因为当我执行console.log时，我看到数组为空。但是，FlatList不会重新呈现。当我单击一个项目以将其删除时，用户名消失（因为它已从currentValues-item中删除），但是未删除项目本身，我仍然看到带边框的矩形。

当我单击一个项目后刚刚重置数组时，它可以工作，因此FlatList会像应有的那样重新呈现。但是然后，所有项都被一次删除（因为我清除了数组），这不是我想要的。

我尝试了extraData道具。我将此添加到我的单位列表中：

extraData={currentValues}

我想确保在更新currentValues-array时重新渲染FlatList，但这也行不通。

有人知道如何解决吗？

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

解决方案

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

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

Answer 1

尝试使用传播运算符强制克隆您的阵列：

let array = [...currentValues]

或者您可以将currentValues连接到useEffect()

当本机数据更改时重新呈现平面列表

1 个答案: