Mam mieszkanie, który wygląda tak:

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

Użytkownicy mogą wybrać 1 lub więcej elementów, a jeśli element jest już wybrany, zostanie on usunięty

Mogę dodać wiele przedmiotów i ich usunąć, jednak problem polega na tym, że jeśli wybrałem element, nie mogę usunąć go bezpośrednio, muszę wybrać inny element, a następnie wcześniej wybrany element zostanie usunięty.

Ale nie mogę go usunąć, jeśli ponownie kliknę na ten sam przedmiot. Muszę wybrać inny przedmiot, starszy przedmiot zostanie usunięty, podczas gdy drugi element zostanie dodany.

Mój renderitem:

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

Również:

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

A tablica wygląda tak:

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

I:

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

Jak mogę naprawić ten problem?

0
S. N 21 listopad 2020, 22:25

1 odpowiedź

Najlepsza odpowiedź

Spróbuj w ten sposób, usunie wybór, jeśli już wybrano

// 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   
};
1
Nooruddin Lakhani 21 listopad 2020, 19:40