Блог

У меня есть плоский список, который выглядит следующим образом:

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

пользователи могут выбрать 1 или более элементов, и если элемент уже выбран, он будет удален

Я могу добавить много элементов и удалить их тоже, однако проблема в том, что если я выбираю элемент, я не могу удалить его напрямую, мне нужно выбрать другой элемент, тогда ранее выбранный элемент будет удален.

но я не могу удалить его, если снова нажму на тот же элемент. Я должен выбрать другой элемент, тогда более старый элемент будет удален, а другой элемент будет добавлен.

мой элемент визуализации:

   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;
    }
  };
 

как я могу исправить эту проблему?

Попробуйте этот способ, он удалит выделение, если оно уже выбрано

 // 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   
};