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

Question

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

饮食

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",
  },
]

Answer 1

你应该使用

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

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

Remove items from Flatlist doesn't work using Redux

javascript

reactjs

react-native

redux

react-native-flatlist