时间戳

首页 > 解决方案 > 函数从 Flatlist 中删除所有项目，而不是选中一个

javascript - 函数从 Flatlist 中删除所有项目，而不是选中一个

问题描述

我现在正在学习 React Redux，我正在制作一个食物列表，用户可以在其中添加和删除项目Flatlist，直到现在我一直在添加项目，效果很好，现在我正在使用从全局状态中删除项目的相同方法foodList，我使用onLongPress在Diet屏幕中启动函数 removeFromFoodList。当我运行代码并继续删除项目而不是删除单个项目时，它会删除平面列表中的所有项目。谢谢您的帮助。

饮食

class Diet extends Component {
  

removeItem = () => {
    let foodList = this.props.foodList;
    this.props.removeFromFoodList(foodList)
  }

 render() {

       return (

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

}
}

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 = (foodList) => {
  return { type: REMOVE_FOOD, payload: foodList}
}

减速机

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.id != action.id)],
      }
      default:
        return state
  }
  
};

数组示例

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

标签： javascriptarraysreactjsreact-nativereact-redux

解决方案

我不确定为什么它返回为空，但我在这里看到了一些问题。

在你的减速器中： [...state.foodList.filter((item) => item.id != action.id)]

如果 foodlist 的结构如所提供：

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

那么它没有 id 键，即使有，action.id 也不存在（只有 action.type 和 action.payload 存在）。尝试控制台日志记录操作和 state.foodListcase REMOVE_FOOD:以获取更多详细信息。

推荐阅读