使用 Redux 无法从 Flatlist 中删除项目答案

【问题标题】：Remove items from Flatlist doesn't work using Redux使用 Redux 无法从 Flatlist 中删除项目
【发布时间】：2021-07-21 10:56:29
【问题描述】：

我现在正在学习 React Redux，我正在制作一个食物列表，用户可以在其中添加和删除 Flatlist 中的项目，直到现在我一直在添加项目，效果很好，现在我使用相同的方法从全局状态foodList 中删除项目，我使用onLongPress 启动函数createTwoButtonAlert，然后在Diet 屏幕中启动removeFromFoodList。当我运行代码并继续删除项目时，即使在终端中也没有任何反应，以前我使用的方法也不起作用，因为它没有删除所选项目，而是删除了平面列表中的所有项目。感谢您的帮助。

饮食

class Diet extends Component {
  

createTwoButtonAlert = (item) =>
Alert.alert(
  "Delete Food",
  "Are you sure to delete this food?",
  [
    {
      text: "Cancel",
      style: "cancel"
    },
    { text: "Delete", 
      onPress: () => this.props.removeFromFoodList(item)
    }
  ]
);

 render() {

       return (

                     <FlatList
                      data={this.props.foodList}
                      renderItem={({item}) => (
                        <View>
                          <TouchableOpacity
                            onLongPress={() => this.createTwoButtonAlert(item)}
                          >
                            <Text>{item.foodName}</Text>
                              <Text>
                                {item.calories}
                              </Text>
                              <MaterialIcons name="arrow-forward-ios" />
                          </TouchableOpacity>
                          </View>
                      )}
                      keyExtractor={item => item.foodId}
                    />

}
}

function mapStateToProps(store){
  return{
      foodList: store.userState.foodList
  };
}

const mapDispatchToProps = { removeFromFoodList };


export default connect(mapStateToProps, mapDispatchToProps)(Diet);

索引

import {  ADD_FOOD, REMOVE_FOOD } from "../constants/index";

export const updateFoodList = (foodList) => {
  return { type: ADD_FOOD, payload: foodList}
}

export const removeFromFoodList = (item) => {
  return { type: REMOVE_FOOD, payload: item.foodId}
}

减速器

import { ADD_FOOD, REMOVE_FOOD } from "../constants";

const initialState = {
  foodList: [],
};

export const user = (state = initialState, action) => {
  switch (action.type){
      case ADD_FOOD: 
      return{
        ...state,
        foodList: [...action.payload],
      }
      case REMOVE_FOOD: 
      return{
        ...state,
        foodList: [...state.foodList.filter((item) => item.foodId != action.foodId)],
      }
      default:
        return state
  }
  
};

数组示例

Array [
  Object {
    "calories": "120",
    "foodId": 0.8845240802796346,
    "foodName": "Rice",
  },
]

【问题讨论】：

标签： javascript reactjs react-native redux react-native-flatlist

【解决方案1】：

你应该使用

foodList: [...state.foodList.filter((item) => item.foodId != action.payload)]

【讨论】：