Question

我正尝试通过单击每个项目来删除FlatList中的项目，但是这对我不起作用，当我单击每个项目时，什么也没有发生，并且没有任何错误。我该如何解决？

这是我的代码：（我删除了不必要的代码和样式）

const FoodList = () => {


  const data=  [

        { text: 'test' },
        { image: 'https://via.placeholder.com/200x100' },
        { text: 'test' },
        { text: 'test' },
        { text: 'test' },
        { text: 'test' },
        { text: 'test' },
        { text: 'test' },
        { text: 'test' },

    ]




    let [itemState, setitemState] = useState(data);




    return (


        <View>
            <FlatList
                data={data}
                keyExtractor={(item, index)=>index}
                renderItem={({ item }) => (
                    <TouchableOpacity>

                <View>
                        <Text>{item.text}</Text>
                        <Image source={{ uri: item.image}}
                        />
                    </View>
                    <Icon  
                 onPress={(index)=>setitemState(itemState=itemState.filter(item=>item.index!==index))} />
                    </TouchableOpacity>
                )}
 />
 </View>
    )}

Answer 1

首先，如@Hamza Khattabi所述，您将需要在itemState道具中使用data来实际使用更新后的状态，否则没有必要使用setitemState，仅修改itemState状态。

第二，我认为item.index不会返回任何内容，而且我非常有信心onPress={(index) => {...}}元素中的Icon不会返回任何{{1} }。 您将使用index道具中的index ，如this link文档中所述。

一旦考虑了这些更改，就可以简单地过滤掉renderItem状态以删除索引处的元素。删除索引处的元素有很多不同的方法，但这是一种可能的解决方案：

itemState

请在下面评论，让我知道这是否对您有帮助。

Answer 2

按状态替换数据属性中的数据变量

const FoodList = () => {


    ...


    let [itemState, setitemState] = useState(data);




    return (


        <View>
            <FlatList
                data={itemState}
                keyExtractor={(item, index)=>index}
                renderItem={({ item }) => (
                 ...
 </View>
    )}

我无法通过useState挂钩从FlatList中删除项目

2 个答案: