从平面列表中删除一个项目-Java 学习之路

我正在使用FlatList来显示数据列表 . 我正在尝试几十个例子如何从数据中删除一行，但找不到合适的解决方案 .

现在我正在删除州的所有数据，但我想删除一个项目 .

这是我的HomeScreen，显示数据列表：

class HomeScreen extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: data.products
    };
  }

  static navigationOptions = {
    title: "Products"
  };

  keyExtractor = (item, index) => item.id;

  openDetails = data => {
    this.props.navigation.navigate("Details", {
      data
    });
  };

  deleteItem = data => {
    this.setState({ data: ''})
  }

  renderProduct = ({ item, index }) => {
    return (
      <Item
        itemTitle={item.title}
        openDetails={() => this.openDetails(item)}
        itemUrl={item.imageUrl}
        data={this.state.data}
        deleteItem={() => this.deleteItem(item)}
      />
    );
  };

  render() {
    return (
      <FlatList
        data={this.state.data}
        renderItem={this.renderProduct}
        keyExtractor={this.keyExtractor}
      />
    );
  }
}

export default HomeScreen;

这是我的Item组件，它显示一个项目并接收deleteRow函数作为prop：

const Item = props => {
  return (
    <View>
      <TouchableOpacity onPress={props.deleteItem}>
        <Image
          source={{ uri: props.itemUrl }}
          style={{ width: "100%", height: 220 }}
        />
        <Text style={styles.productTitle}>{props.itemTitle}</Text>
      </TouchableOpacity>
    </View>
  );
};

export default Item;

1 回答

使用以下 deleteItem 功能 .

deleteItem = data => {
  let allItems = [...this.state.data];
  let filteredItems = allItems.filter(item => item.id != data.id);
  this.setState({ data: filteredItems })
}

这应该过滤掉已删除的项目 .

回复于 2024-05-02T10:31:05+08:00

从平面列表中删除一个项目

1 回答

相关问题