在 React-Redux 中的复选框中切换操作不起作用

Question

您好，我在 Redux 中的操作有问题。我想检查单个复选框，如果它被点击，我的状态会改变

举例：如果我点击第二个元素，我的值将会改变。其他元素不会改变
如果我有 state[0].question[0].answers[1].checked = true ||如果我将在同一个地方单击 2 次，则为 false

会有帮助：

状态 - 我的状态是 arr 并且里面有一些对象 (https://github.com/RetupK/QuizApp/blob/master/src/store/quiz/quizReducer.js)

actions creators - (https://github.com/RetupK/QuizApp/blob/master/src/actions/quiz/quizActions.js)

quizId - 这取决于我们将选择什么测验。 是路由匹配参数。这是我们的路由(https://github.com/RetupK/QuizApp/blob/master/src/App.js)
这是我们的组件，展示了我是如何使用 mapDispatchToProps 以及如何将其与视图连接的(https://github.com/RetupK/QuizApp/blob/master/src/containers/quizContainer.js)

activeQuestion - 这是哪个问题处于活动状态，这是组件中的本地状态。

有人知道如何通过不执行此操作来解决此问题吗？

Answer 1

如果我不能正确理解这一点，我很抱歉。据我了解，您需要根据您的状态实现切换系统。

假设您有一个如下所示的初始状态：

const initialState = {
    toggle: false,
}

在 reducer 内的 switch 语句中，您可以执行以下操作：

const yourReducer = (state = initialState, action) => {
    switch(action.type){
    case TOGGLE: 
        return {...state, toggle: !state.toggle}
    default:
        return initialState
    }
}

您可以在 onClick 事件处理程序中的 react 内部调度您的操作，因此每次单击该元素时，它都会根据您的状态返回 true 或 false。

更新：现在在您的情况下，由于您的状态是一个数组，并且您想根据 id 或索引返回您的状态，您可以尝试执行以下操作：

//in your reducer switch() case
return state.map((e, i) =>{
     if (i === indexYourLookingFor) return {...e, checked: !e.checked};
     else return e;
})

这样您就可以保持状态数组的不变性。您可以在官方 redux 文档here 中查看更多模式。