Question

我使用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;

Answer 1

使用以下deleteItem功能。

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

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

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

1 个答案: