Невозможно удалить элементы в React Native FlatList - PullRequest
Новая
       39

Невозможно удалить элементы в React Native FlatList

0 голосов
/ 08 июля 2020

Я не могу заставить работать кнопку удаления на пользовательском компоненте с именем ActivityItem.

Пользовательский компонент в ActivityItem. js: 

const ActivityItem = props => {
    return (
        <View>
            <Button title="Delete" onPress={props.onDelete} />
        </View>
    );
};

removeActivity функция определены в действиях. js файл действий: 

export const REMOVE_ACTIVITY = 'REMOVE_ACTIVITY';

export const removeActivity = id => {
    return {type: REMOVE_ACTIVITY, id: id};
};

И мои действия. js файл редуктора: 

const initialState = {
    allActivities: ACTIVITIES,
    userActivities: ACTIVITIES.filter(activity => activity.userId === 'u1')
};

export default (state = initialState, action) => {
    REMOVE_ACTIVITY:
        const updatedUserActivities = state.userActivities.filter((activity) => activity.id !== action.id);
        return {
            ...state,
            userActivities: updatedUserActivities
        };
    return state;
};

ACTIVITIES - это список Activity элементов которые содержат userId и уникальные свойства id.

Наконец, экран, на котором я визуализирую FlatList: 

const MyScreen = props => {
    const myActivities = useSelector(state => state.activities.userActivities);
    const dispatch = useDispatch();
    return (
        <FlatList 
            data={myActivities}
            keyExtractor={item => item.id}
            renderItem={itemData => (
                <ActivityItem 
                    onDelete={() => {
                        dispatch(removeActivity(itemData.item.id));
                    }} 
                />
            )}
        />
    );
};

Может ли кто-нибудь сказать мне, что я здесь делаю не так ?

Ответы [ 3 ]

1 голос
/ 09 июля 2020

Вам нужно изменить reducer вот так 

const initialState = {
    allActivities: ACTIVITIES,
    userActivities: ACTIVITIES.filter(activity => activity.userId === 'u1')
};
export default (state = initialState, action) => {
    REMOVE_ACTIVITY:
        const updatedUserActivities = state.userActivities.filter((activity) => activity.id !== action.id);
        return {
            ...state,
            userActivities: [...updatedUserActivities]
        };
    return state;
};

вам нужно добавить extraData props к flatList, как показано ниже для отражения изменений дюйм flatList

const MyScreen = props => {
    const myActivities = useSelector(state => state.activities.userActivities);
    const dispatch = useDispatch();
    return (
        <FlatList 
            data={myActivities}
            extraData={myActivities}
            keyExtractor={item => item.id}
            renderItem={itemData => (
                <ActivityItem 
                    onDelete={() => {
                        dispatch(removeActivity(itemData.item.id));
                    }} 
                />
            )}
        />
    );
};
0 голосов
/ 10 июля 2020

Для тех, кто борется с подобной проблемой, убедитесь, что вы правильно импортируете свое действие в файл редуктора.

Первоначально я импортировал так: 

import REMOVE_ACTIVITY from '../actions/activities';

Добавление фигурные скобки, подобные этой, устранили проблему. 

import { REMOVE_ACTIVITY } from '../actions/activities';
0 голосов
/ 09 июля 2020

Насколько я понимаю, вам нужно внести изменения в файл редуктора, мне это кажется ошибочным. Хотя, глядя на этот небольшой фрагмент кода, можно сказать немногое. Я предлагаю внести изменения в ваш файл редуктора так, чтобы он выглядел примерно так: - 

export default (state = initialState, action) => {
  const { type, id } = action;

  switch (type) {
    case REMOVE_ACTIVITY:
      const { userActivities } = state.activities || {};
      const updatedUserActivities = userActivities.filter((activity) => activity.id !== id);
      console.log('updatedUserActivities is', updatedUserActivities, ' and userActivities is', userActivities);     // can use this console to check the values before updating.
      return {
          ...state,
          userActivities: updatedUserActivities,
      };
    default:
      return state;
  }
};

В вашем файле редуктора было изменено: -

  • Используется userActivities из правильного места, т.е. state.activities вместо непосредственно из состояния.
  • Исправлен корпус переключателя, который работает.

Как предложенный выше в коде, если вы хотите посмотреть, какой редуктор пытается обновить, попробуйте распечатать updatedUserActivities и значение userActivities . Надеюсь, это решит вашу проблему. Наслаждайтесь!

...