Я не могу удалить элементы из FlatList с помощью ловушки useState

Question

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

Это мой код: (я удалил ненужные коды и стили)

const FoodList = () => {


  const data=  [

        { text: 'test' },
        { image: 'https://via.placeholder.com/200x100' },
        { text: 'test' },
        { text: 'test' },
        { text: 'test' },
        { text: 'test' },
        { text: 'test' },
        { text: 'test' },
        { text: 'test' },

    ]




    let [itemState, setitemState] = useState(data);




    return (


        <View>
            <FlatList
                data={data}
                keyExtractor={(item, index)=>index}
                renderItem={({ item }) => (
                    <TouchableOpacity>

                <View>
                        <Text>{item.text}</Text>
                        <Image source={{ uri: item.image}}
                        />
                    </View>
                    <Icon  
                 onPress={(index)=>setitemState(itemState=itemState.filter(item=>item.index!==index))} />
                    </TouchableOpacity>
                )}
 />
 </View>
    )}

Answer 1

Во-первых, как упомянул @Hamza Khattabi, вам нужно будет использовать itemState в data реквизит для фактического использования обновленного состояния, в противном случае нет смысла использовать setitemState, который изменяет только itemState state.

Во-вторых, я не думаю, что item.index вообще что-либо вернет, и я вполне уверен, что onPress={(index) => {...}} в вашем Icon элементе также не возвращает никакого index , Вы будете использовать index из renderItem prop , как упомянуто в документации по по этой ссылке .

После того, как вы учтете эти изменения, затем вы можете просто отфильтровать состояние itemState, чтобы удалить элемент в индексе. Есть много разных способов удалить элемент в индексе, но вот возможное решение:

<FlatList
  data={itemState} // Note the use of itemState
  keyExtractor={(item, index) => index}
  renderItem={({ item, index }) => ( // Note the use of index
    <TouchableOpacity>
      <View>
        <Text>{item.text}</Text>
        <Image source={{ uri: item.image }} />
      </View>
      <Icon
        onPress={() => { // Note that here you can use any function to remove the element at index from the itemState list
          let _itemState = itemState.filter(
            (_item, _index) => _index !== index
          );
          setitemState(_itemState);
        }}
      />
    </TouchableOpacity>
  )}
/>

Дайте мне знать, если это поможет вам, комментируя ниже.

Answer 2

Замените переменную данных в атрибутах данных вашим состоянием

const FoodList = () => {


    ...


    let [itemState, setitemState] = useState(data);




    return (


        <View>
            <FlatList
                data={itemState}
                keyExtractor={(item, index)=>index}
                renderItem={({ item }) => (
                 ...
 </View>
    )}