如何在react中删除reducer中数组中的对象？答案

【问题标题】：How to delete object in an array in a reducer in react?如何在react中删除reducer中数组中的对象？
【发布时间】：2019-12-04 08:50:09
【问题描述】：

我知道我的问题已经问过了，但我不这么认为：

我想删除我的减速器上的一个项目，但我尝试过的一切都没有用。

我尝试了很多东西，但在被阻止 2 天后，我想我需要帮助！

这是调度员：

store.dispatch({
     type: 'REMOVE_COIN',
     payload: {
          id:coinId
      }
 })

这里是减速器：

const intialState = {
}

const coinReducer = (state = intialState, action) => {
    switch(action.type){
        case "REGISTER_COIN":
            return {
                ...state,
                [action.payload.id]: {
                    id:action.payload.id,
                    position:action.payload.position,
                }
            }
        case "REMOVE_COIN":

            const newState = Object.assign([], state)
            // console.log(newState)

            // if (newState.includes(Object(action.payload.id)) > -1) {
                // console.log('OUI')
            // }else{
                // console.log('NON')
            // }

            // const newState = [...state]
            // const index = newState.findIndex(coin => coin.id == action.payload.id)
            // if (index !== -1) {
            //     newState.splice(index, 1);
            //     console.log(newState)
            // }

            const finalState = newState.filter(coin => coin.id !== action.payload.id)
            console.log(finalState)
            // const coinId = action.payload.id

            // // console.log(newState)

            // const indexOfCatToDelete = newState.findIndex(coin => coin.id == String(action.payload.id))


            // console.log(indexOfCatToDelete)
            // newState.splice(indexOfCatToDelete, 1)
            // console.log(newState)
            // return newState     
            // return {
            //     state : newState.filter( (item, index) => index !== action.index)
            //  }    
            // return finalState
            // const numIndex = parseInt(action.index)
            // return {
            //     state: [
            //     ...state.slice(0, numIndex),
            //     ...state.slice(numIndex+ 1)
            //     ]
            // }
        default:
            return state
    }
}

export default coinReducer

我让所有评论显示我尝试过的一切。

感谢您的帮助！

【问题讨论】：

标签： reactjs react-redux reducers

【解决方案1】：

你需要将你的初始状态作为一个数组才能工作。或者给它加上coins属性，就是一个数组：

const initialState = [];
// Or 
const initialState = {coins: []}

确保您确实收到了带有payload.id 的action，然后您可以在reducer 中返回过滤后的状态：

case "REMOVE_COIN":
  // OR state.coins.filter if that's what you have on the state
  return state.filter(coin => String(coin.id) !== String(action.payload.id));

编辑：回顾你的 reducer，我注意到你有一个对象的状态，其中 coin id 是一个道具。在这种情况下，您需要按对象键过滤状态：

case "REMOVE_COIN":
  return Object.keys(state)
  .filter(key => key !== String(action.payload.id))
  .reduce((obj, key) => {
    obj[key] = state[key];
    return obj;
  }, {});

【讨论】：