无法删除 React Native FlatList 中的项目

Question

我无法让名为ActivityItem的自定义组件上的删除按钮工作。

ActivityItem.js 中的自定义组件：

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

在activity.js动作文件中定义的removeActivity function：

export const REMOVE_ACTIVITY = 'REMOVE_ACTIVITY';

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

还有我的activity.js 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;
};

ACTIVITIES是包含userId和唯一id属性的Activity项目列表。

最后，我渲染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));
                    }} 
                />
            )}
        />
    );
};

谁能告诉我我在这里做错了什么？

Answer 1

你需要像这样改变你的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道具添加到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));
                    }} 
                />
            )}
        />
    );
};

Answer 2

据我所知，您需要在减速器文件中进行更改，这对我来说似乎是错误的。 虽然光看这一小段代码并不能说太多。 我建议在你的 reducer 文件中进行更改，使其看起来如下所示：-

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

您的减速器文件中发生的变化是：-

• 使用来自正确位置的用户活动，即 state.activities ，而不是直接来自 state。
• 更正了有效的开关盒。

如上面代码中的建议，如果您想查看 reducer 尝试更新的内容，请尝试打印updatedUserActivities和userActivities的值。 我希望这能解决您的问题，享受！

Answer 3

对于遇到类似问题的任何人，请确保您在减速器文件中正确导入您的操作。

最初，我是这样导入的：

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

像这样添加花括号解决了这个问题。

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