Redux Reducer 状态未正确更新

Question

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

//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}));

    });

};

Answer 1

假设res.data是您刚刚添加的新项目，当您调度 updateItemList 时，我认为您错过了数组的方括号。所以你只需发送res.data有效负载。应该是这样的updateItemsList([res.data, ...getState().itemsList.items])