从平面列表中删除一项答案

【问题标题】：Remove one item from flatlist从平面列表中删除一项
【发布时间】：2023-03-05 02:35:01
【问题描述】：

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

现在我正在从状态中删除所有数据，但我只想删除一项。

这是显示数据列表的主屏幕：

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 函数作为道具：

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;

【问题讨论】：

标签： reactjs react-native react-native-flatlist

【解决方案1】：

使用下面的deleteItem函数。

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

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

【讨论】：

当我点击删除时什么都没有发生
在 flatlist 添加另一个 prop extraData={this.state}
添加了 extraData={this.state.data} 但还是一样，看起来你的方法不对，但它还没有工作
只是为了确保查看您的 keyExtractor 函数，每个产品对象都有一个 id 属性？您能否在过滤器之前和之后将 console.log 添加到 deleteItem 以验证项目已被删除。
每个对象都有 id（从 1 到 9）。过滤器前的 Console.log 显示与过滤器后相同的数组