Question

所以我正在用react redux nodejs和mongoDB创建类似“ Trello”的克隆，但是我遇到了一些问题。问题是，当我将卡添加到列表中时，它不会更新Redux状态，因此，只有刷新页面后，我才会在列表中看到卡。（该卡已添加到数据库，但未恢复到还原状态）。

仅需更多信息：boardlists是mongo在对象板上的一个数组，该数组内有list对象，每个对象内有一个纸牌数组。

这是我的代码：

减速器

const initialState = {
  boardLists: [
    
  ],
};

export default function (state = initialState, action) {
  switch (action.type) {
    case FETCH_ITEMS_BEGIN:
      return {
        ...state,
        loading: true,
        errors: null,
      };
    case FETCH_ITEMS_SUCCESS:
      return {
        ...state,
        loading: false,
        boardLists: action.payload.data.boardLists,
      };
    case FETCH_ITEMS_FAILURE:
      return {
        ...state,
        loading: false,
        errors: action.payload.errors,
        boardLists: [],
      };
    //handless creation of data
    case ADD_LIST:
      return {
        boardLists: [...state.boardLists, action.payload.list],
      };

    case ADD_CARD:
      return {
        boardlists: [...state.boardlists, action.payload.card],
      }

动作

export const fetchItemsBegin = () => ({
  type: FETCH_ITEMS_BEGIN,
});
export const fetchItemsSuccess = (data) => ({
  type: FETCH_ITEMS_SUCCESS,
  payload: { data },
});
export const fetchItemsFailure = (errors) => ({
  type: FETCH_ITEMS_FAILURE,
  payload: { errors },
});

//dispatched when item needs to be created
export const addList = (list) => {
  return {
    type: ADD_LIST,
    payload: { list },
  };
};

// add card
export const addCard = (card) => {
  return {
    type: ADD_CARD,
    payload: { card }
  };
};

//dispatched when all the lists from board stored in redux store needs to be read
export const getBoardLists = () => {
  return (dispatch) => {
    // function starts
    dispatch(fetchItemsBegin()); // fetching begins
    return http
      .get(`${myUrl}/boards/one`) // req data from server
      .then(({ data }) => {
        console.log(data);

        // if data is found
        dispatch(fetchItemsSuccess(data)); // success
      })
      .catch((error) => dispatch(fetchItemsFailure(error))); //errors
  };
};

处理添加功能的组件

handleAddCard = () => {
    //add card
    const { text } = this.state;
    const { listID } = this.props;
    const newCard = {
      // _id: uuidv4(),
      text,
    };
    cardService.createCard(newCard, listID);
    this.props.addCard(newCard);
  };

.
.
.
.
.
const mapStateToProps = ({ boardLists, loading, errors }) => ({
  boardLists,
  loading,
  errors,
});

export default connect(mapStateToProps, { addList, addCard, getBoardLists })(ActionButton);

Answer 1

似乎您需要更新列表数组中的对象，而不是将卡片项目添加到列表数组本身。

在操作中：

// add card
export const addCard = (card, listId) => {
  return {
    type: ADD_CARD,
    payload: { listId, card }
  };
};

在Reducer中，您将需要找到具有匹配ID的列表，并将卡片添加到其数组中，例如：

case ADD_CARD:
  const {listId, card} = action.payload;
      return {
        ...state,
        boardLists: state.boardLists.map(list => {
          list.cards = list.cards || [];
          return list.id === listId ? {...list, cards: [...list.cards, card]} : list
        }),
      }

关于堆栈溢出的另一个问题对于本部分可能很有用。 link

如何更新数组的redux状态？

1 个答案: