如何不可变地更改或更新状态的特定值

Question

我是 js 新手，并且用 redux 对 js 做出反应我正在尝试不可变地更新全局状态的值这是我当前的状态

const initialState = {
  questions: [
    {
      id: 1010,
      name: "Inside which HTML element do we put the JavaScript?",
      questionTypeId: 1,
      options: [
        {
          id: 10,
          name: "javascript",
          isAnswer: false,
          isSelected: false
        },
        {
          id: 11,
          name: "scripting",
          isAnswer: false,
          isSelected: false
        },
        {
          id: 12,
          name: "script",
          isAnswer: true,
          isSelected: false
        },
        {
          id: 13,
          name: "js",
          isAnswer: false,
          isSelected: false
        }
      ]
    },
    {
      id: 1011,
      name: "Javascript is a langague used for ?",
      questionTypeId: 2,
      options: [
        {
          id: 14,
          name: "ConsoleApp",
          isAnswer: false,
          isSelected: false
        },
        {
          id: 15,
          name: "ShellApp",
          isAnswer: false,
          isSelected: false
        },
        {
          id: 16,
          name: "WebApp",
          isAnswer: true,
          isSelected: false
        },
        {
          id: 17,
          name: "MobileApp",
          isAnswer: false,
          isSelected: false
        }
      ]
    },
    {
      id: 1012,
      name: "What is the full form of SPA?",
      questionTypeId: 3,
      options: [
        {
          id: 18,
          name: "Secured and Progressive App",
          isAnswer: false,
          isSelected: false
        },
        {
          id: 19,
          name: "Single Page Application",
          isAnswer: false,
          isSelected: false
        },
        {
          id: 20,
          name: "SOLID Principles for Application",
          isAnswer: true,
          isSelected: false
        },
        {
          id: 21,
          name: "None of the above",
          isAnswer: false,
          isSelected: false
        }
      ]
    }
  ],
  Currentquestion: []
};

我想将问题数组的 isSelected 值更改为 true，该数组的索引具有 questionTypeId:1，后跟索引的选项数组：0 下面是我试图改变状态的reducer，UI中的action.payload值为1，ui中的action.value的值为0

case SELECT_ANS: {
      const question = action.payload;
      const index = action.value;
      // const newstate = produce(state, draftsate => {
      //   draftsate.questions[question].options[index].isSelected = true;
      // });
      return {
        ...state,questions:[
          {
            ...state.questions[question],options:[{
              ...state.questions[question].options[index],isSelected:true
            }]
          }
        ]
          ]
        ]
      };

如果有任何遗漏或不当之处我很抱歉，我会尽可能多地提供所有信息，任何解释方面的帮助都会非常感谢，在此先感谢

Answer 1

起初我注意到您将您的操作数据拆分为action.payload 和action.value，这是针对the flux principles。您必须将您的数据对象放入action.payload 并像action.payload.questionTypeId 和action.payload.index 一样获取它。

嗯，你可以像这样改变你的商店

case SELECT_ANS: {
  return {
    ...store,
    questions: store.questions.map((question) => {
      if (question.questionTypeId === action.payload.questionTypeId) {
        return {
          ...question,
          options: question.options.map((option, index) => {
            if (index === action.payload.index) {
              return {
                ...option,
                isSelected: true,
              };
            }

            return option;
          }),
        };
      }

      return question;
    }),
  };
};

如果我没有很好地回答你的问题，你可以在redux docs获取更多信息或亲自问我。

祝你学习顺利！