javascript - 如何使用 JavaScript 编写 reducer 来操作这个 JSON

Question

我有一个这样的 JSON

"decks": [
    {
      "id": 65,
      "name": "deck1",
      "cards": [
        {
          "question": "q1",
          "answer": "a1"
        },
        {
          "question": "q2",
          "answer": "a2"
        },
        {
          "question": "q3",
          "answer": "a3"
        }
      ]
    },
    {
      "id": 83,
      "name": "deck2",
      "cards": []
    }

现在，我想在添加一张卡片后返回甲板对象

   {
      "question": "q4",
      "answer": "a4"
    },

并且该卡应该添加到相应的 id假设在这种情况下为 -65，结果应该像这样返回

"decks": [
    {
      "id": 65,
      "name": "deck1",
      "cards": [
        {
          "question": "q1",
          "answer": "a1"
        },
        {
          "question": "q2",
          "answer": "a2"
        },
        {
          "question": "q3",
          "answer": "a3"
        },
        {
          "question": "q4",
          "answer": "a4"
        }
      ]
    },
    {
      "id": 83,
      "name": "deck2",
      "cards": []
    }

这是我在其中操作对象的减速器代码

case ADD_CARD:

      var index = state.decks.findIndex(x => x.id === action.deckId);


      return {
        ...state.decks,
        decks: state.decks[index].cards.concat(action.newCard),
      };

你能帮我写正确的reducer代码吗？上面的代码没有给出预期的结果。感谢您的时间和支持。

标签： javascriptreact-nativereduxreact-redux

Answer 1

case ADD_CARD:
      const newState = {...state};
      var index = state.decks.findIndex(x => x.id === action.deckId);
      let deck = {...state.decks[index]};
      deck = {...deck, { cards: [...deck.cards, action.newCard] };
      newState[index] = deck;
      return newState;