时间戳

首页 > 解决方案 > REDUX：如何从我的数组中删除相关项目？

javascript - REDUX：如何从我的数组中删除相关项目？

问题描述

我正在使用 Redux 在 React 中开发一个项目。我正在尝试删除一个项目。但是，它向我的数组添加了一个数组。我怎样才能删除它？这是我的代码：

import ActionTypes from "../constants/ActionTypes";

const initialState = {
  myCities: [],
  aCity: {},
  getCityById: {},
};

export const WeatherReducer = (state = initialState, { type, payload }) => {
  switch (type) {
    case ActionTypes.GETBY_CITYNAME:
      return {
        ...state,
        aCity: payload,
        myCities: [...state.myCities, payload],
      };
    case ActionTypes.GETCITYBYID:
      return {
        ...state,
        getCityById: payload,
        myCities: [], //first I tried to it empty, not works at all and I also tried without it
        myCities: [ 
          ...state.myCities,
          initialState.myCities.filter((item) => item.id !== payload.id), //Then I tried to find related item, choose it and add all objects to my array without related item
        ],
      };
    default:
      return state;
  }
};

我还添加了我的删除内容：

const HandleDelete = (cityId) => {
  dispatch(GetCityById(cityId, apiKEY));
};

谢谢你的努力

标签： javascriptreactjsredux

解决方案

该.filter()方法已经返回了一个新数组，所以这里不需要将它放在另一个数组中

myCities: [ 
  ...state.myCities,
  initialState.myCities.filter((item) => item.id !== payload.id)
],

上面创建了一个新数组[]，然后使用扩展语法 ( )state.myCities将所有元素放入该新数组中。然后，它添加一个新元素，即过滤后的数组。相反，作为返回一个仅包含您的回调返回的项目的数组，您可以直接使用该数组作为新值...initialState.myCities.filter().filter()truemyCities:

myCities: initialState.myCities.filter((item) => item.id !== payload.id)

推荐阅读