Удалить один элемент из списка

Я использую 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;

react-native reactjs react-native-flatlist
person J.range    schedule 19.04.2018    source источник

Ответы (1)


arrow_upward
6
arrow_downward

Используйте функцию ниже deleteItem.

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

Это должно отфильтровать удаленный элемент.

person Rishabh Bhatia    schedule 19.04.2018
comment
Ничего не происходит, когда я нажимаю удалить - person J.range; 19.04.2018
comment
В плоский список добавьте еще один реквизит extraData={this.state} - person Rishabh Bhatia; 19.04.2018
comment
добавили extraData={this.state.data}, но все равно то же самое, похоже, вы не правы, но пока не работает - person J.range; 19.04.2018
comment
Просто чтобы убедиться, глядя на вашу функцию keyExtractor, каждый объект продукта имеет свойство id? Не могли бы вы добавить console.log в deleteItem до и после фильтра, чтобы убедиться, что элемент удален. - person Rishabh Bhatia; 19.04.2018
comment
Каждый объект имеет идентификатор (от 1 до 9). Console.log перед фильтром показывает тот же массив, что и после фильтра - person J.range; 19.04.2018
comment
Это работает, большое спасибо. Я не получил правильный console.log, потому что setState асинхронный - person J.range; 19.04.2018