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

//React User's Item List Component
class Items extends Component{

  componentDidMount(){
    this.props.userItems();
  }
    render(){
      const { items, loading} = this.props.itemsList;
      return(
        <React.Fragment>
        {loading === true ? (
          <div>
            <div>
            <h1>Your Items Are Loading...</h1>
            </div>
          </div>
        ):(
          <div>
          {items.map(item => (
            <React.Fragment key={item.id}>
              <div>
                <div>
                <h3>{item.name}</h3>
                </div>
              </div>
            </React.Fragment>
          ))}
          </div>
          )}
        </React.Fragment>
      );
    }
};

export default connect(mapStateToProps, mapActionsToProps)(Items);

//React Random Item List Component
class RandomItems extends Component{

  handleAddItem = (id) =>{
    this.props.addItemToList(id);
  }

  componentDidMount(){
    this.props.getRandomItemsList();
  }

    render(){
        const { randomItems, loading} = this.props.randomItemsList;
      return(
        <React.Fragment>
          {loading === true ? (
            <div>
              <div>
              <h1>Loading Random Items...</h1>
              </div>
            </div>
          ): (
                <div>
                {randomItems.map(item => (
              <React.Fragment key={item.id}>
              <div>
                <div>
                <h3>{item.name}</h3>
                <button onClick={this.handleAddItem.bind(this, item.id)}>Add To List</button>
                </div>
              </div>
              </React.Fragment>
            ))}
            </div>
            )}
          </React.Fragment>

      )
    }
};

export default connect(mapStateToProps, mapActionsToProps)(RandomItems);

标签： javascriptreactjsreduxreact-redux

javascript - Redux Reducer 状态未正确更新

问题描述

解决方案

推荐阅读