我无法通过使用状态钩子从平面列表中删除项目

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-Hattabi所提到的，您需要在data道具中使用itemState才能实际使用更新后的状态，否则使用setitemState是没有意义的，它只修改itemState状态。

其次，我认为item.index根本不会返回任何内容，而且我非常确信Icon元素中的onPress={(index) => {...}}也不会返回任何index您将使用renderItem道具中的index，如本链接文档中所述。

一旦考虑到这些更改，就可以简单地过滤掉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>
)}
/>

如果这对你有帮助，请在下面评论。

Answer 2

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

const FoodList = () => {

...

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


return (

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