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

Question

Я создал простое приложение для покупок, которое имеет три экрана, включая: Home, Book Store и Cart экраны

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

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

Код редуктора:

import {
    ADD,
    REMOVE


} from '../actions/types';



const initialState = {

    items: [],
    counter: 0
}



export const cardReducer = (state = initialState, action) => {

    switch (action.type) {
        case ADD:
            return {
                ...state, items: state.items.concat({

                    name: action.payload.name,
                    index: Math.random(),
                    price: action.payload.price,
                    id: action.payload.id



                }), counter: state.counter + 1 }
            break;
        case REMOVE:
            return {
                ...state,
                items: state.items.filter((item) => {

                    item.index !== action.payload

                }), counter: state.counter - 1 }

            break;

        default:
            return state;
    }}

Код действия:

import {
    ADD,
    REMOVE


} from './types';


export const addSomething = (item) => {

    return {

        type: ADD,
        payload: item

    }}


export const removeSomething = (index) => {

    return  {


            type: REMOVE,
            payload: index
        } }

А это экран Cart коды:

import { useDispatch, useSelector } from 'react-redux';
import { addSomething, removeSomething } from '../actions';




const Cards = (props) => {


  const { navigation } = props;
  const dispatch = useDispatch();
  const items = useSelector(state => state.cardR.items)



  return (


      <View style={{ alignItems: 'center', flex: 1 }}>
        <View style={{ width: '80%' }}>
          <FlatList
            data={items}
            keyExtractor={(item, index) => index}
            renderItem={({ item, index }) => (

              <TouchableOpacity
                style={styles.button}
                activeOpacity={0.7}
                onPress={(index) => dispatch(removeSomething(item.index))}

              >

                <Text style={{ color: 'white' }}>{item.name}</Text>
                <Text style={{ color: 'white' }}>{item.price}</Text>

              </TouchableOpacity>

            )} />
        </View>
      </View>


  )}

Answer 1

Проблема возникает в свойстве index, также @giotskhada упомянул в своем ответе. Возможным решением может быть проверка съемного элемента с его id вместо индекса, который уже существует для уникальной идентификации каждого элемента.

Попробуйте вместо этого -

Код редуктора:

case REMOVE:
    return {
        ...state,
        items: state.items.filter((item) => {
            return item.id !== action.payload   // Id instead of index and return statement
        }), 
        counter: state.counter - 1 
    }

    break;

Код экрана корзины:

<TouchableOpacity
    style={styles.button}
    activeOpacity={0.7}
    onPress={(index) => dispatch(removeSomething(item.id))}>  // id instead of index

        <Text style={{ color: 'white' }}>{item.name}</Text>
        <Text style={{ color: 'white' }}>{item.price}</Text>

</TouchableOpacity>

Answer 2

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

Самостоятельно создавать случайно сгенерированные индексы - плохая идея, поскольку в результате вы можете получить дубликаты индексов. Более того, Math.random() является генератором псевдослучайных чисел с плавающей запятой, и ему нельзя доверять.

Если вы хотите иметь разные индексы для каждого элемента, вы должны сделать это по-другому. Например, у вас может быть состояние idCounter, которое увеличивается только на единицу при добавлении нового элемента. Затем вы можете установить индекс нового элемента на state.idCounter и быть уверенным, что он будет отличаться от всех остальных.