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

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

将数据属性中的数据变量替换为您所在的州

const FoodList = () => {


    ...


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




    return (


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

Answer 2

首先，正如@Hamza Khattabi 所提到的，您需要在 data 道具中使用 itemState 才能实际使用更新后的状态，否则没有必要使用 setitemState，它只修改 itemState 状态。

其次，我认为 item.index 根本不会 return 任何东西，而且我非常有信心 Icon 元素中的 onPress={(index) => {...}} 不会returning 任何 index。 您将使用 renderItem prop 中的 index，如 this link.

的文档中所述

一旦您考虑到这些更改，您就可以简单地过滤掉 itemState 状态以删除索引处的元素。有许多不同的方法可以删除索引处的元素，但这里有一个可能的解决方案：

<FlatList
  data={itemState} // Note the use of itemState
  keyExtractor={(item, index) => index}
  renderItem={({ item, index }) => ( // Note the use of index
    <TouchableOpacity>
      <View>
        <Text>{item.text}</Text>
        <Image source={{ uri: item.image }} />
      </View>
      <Icon
        onPress={() => { // Note that here you can use any function to remove the element at index from the itemState list
          let _itemState = itemState.filter(
            (_item, _index) => _index !== index
          );
          setitemState(_itemState);
        }}
      />
    </TouchableOpacity>
  )}
/>

如果这对您有帮助，请在下方评论告诉我。

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

I can't remove items from FlatList by useState hook

javascript

reactjs

react-native

react-native-flatlist

react-hooks