Redux Reducer 状态未正确更新

在我的反应应用程序中,我有两个组件(个人项目列表和随机项目列表)。在我的随机项目列表组件中,我可以单击该项目并将其添加到我的个人项目列表组件中。但是,当我这样做时,它会将我的个人项目状态中的其他项目替换为我刚刚添加的新项目。我只是想添加到我的个人物品列表中。


//Update Items List

export const updateItemsList = (data) => ({

  type   : UPDATE_ITEMS_LIST,

  payload: data

});

//Items List Reducer

const initialState = {

  items: [],

  loading: false

};


export default function(state = initialState, action){

  switch(action.type){

    case UPDATE_ITEMS_LIST:

      return{

        ...state,

        items: action.payload,

        loading: false

      };

    default:

      return state;

  }

}

//Select Item To Add

export const addItemToList = (itemId) => (dispatch, getState) =>{

  const config = {

    headers:{

      "Content-Type": "application/json"

    }

  };


  axios.post(`/api/items/addItem/${itemId}`, {}, config)

    .then(res => {

      dispatch({

      type: ADD_ITEM_SUCCESS,

      payload: res.data

    })

   dispatch(updateItemsList(res.data, ...getState().itemsList.items));

  })

    .catch(err =>{

      dispatch({type: ADD_ITEM_ERROR}));

    });

};


猛跑小猪
浏览 110回答 1
1回答

眼眸繁星

假设res.data是您刚刚添加的新项目,当您调度 updateItemList 时,我认为您错过了数组的方括号。所以你只需发送res.data有效负载。应该是这样的updateItemsList([res.data, ...getState().itemsList.items])
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript