从平面列表中选择和删除多个项目

Question

我有一个平面列表，如下所示：

  <FlatList
    numColumns={3}
    scrollEnabled={false}
    data={dataset}
    keyExtractor={(item) => item.id}
    extraData={selectedId}
    renderItem={renderItem}
  />

用户可以 select 1 个或多个项目，如果该项目已经 selected 则它将被删除

我可以添加很多项目也可以删除它们，但是，问题是如果我 select 一个项目，我不能直接删除它我需要 select 另一个项目，然后是之前选择的项目将被删除。

但如果我再次点击相同的项目，我将无法删除它。我必须选择另一个项目，然后旧项目将被删除，而另一个项目将被添加。

我的渲染项目：

  const renderItem = ({ item }) => {
    return (
      <TouchableOpacity
        style={item.selected ? styles.setItemItemSlt : styles.setItemItem}
        onPress={() => [
          setSelectedId(item.id),
          onPressBtn({ item }, item.selected),
        ]}
      >
        <Image style={styles.setItemItemImage} source={item.icon} />
      </TouchableOpacity>
    );
  };

还有：

  const [selectedId, setSelectedId] = useState(null);

数组如下所示：

    const [dataset, setItem] = useState([
        {
          id: 1,
          icon: require("../../src/assets/png/egg.png"),
          name: "egg",
          selected: false,
        },
        .
        .
        .
        .
        .
      ]);

和：

  const onPressBtn = ({ item }) => {
    // if it has been selected remove it
    if (item.selected) {
      item.selected = false;
    }
    // if it is not in the list add it
    else {
      item.selected = true;
    }
  };

我该如何解决这个问题？

Answer 1

试试这个方法，如果已经选择它会删除选择

// add index here
const renderItem = ({ item, index }) => {
    return (
      <TouchableOpacity
        .....
        onPress={() => [
          .....
          onPressBtn(item, index), // send index as param
        ]}
      >
        .........
      </TouchableOpacity>
    );
  };

const onPressBtn = (item, index ) => {
    const data = [...allergens];
    data[index].selected = !data[index].selected;
    allergy(data); // reset data here to state   
};

从平面列表中选择和删除多个项目

selecting and removing multiple items from flatlist

react-native

react-native-flatlist