Question

您好，我在Redux中的操作存在问题。我要选中一个复选框，如果单击它，我的状态将会改变

示例：如果我单击第二个元素，则我的值将更改。其他元素不会改变
如果我的状态为[0] .question [0] .answers [1] .checked = true ||如果我将在同一位置单击2倍，则为false

会有所帮助 ：

状态-我的状态是arr，并且在（https://github.com/RetupK/QuizApp/blob/master/src/store/quiz/quizReducer.js）

中有一些对象

动作创建者-（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）< / em>

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

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

Answer 1

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

假设您的初始状态如下：

const initialState = {
    toggle: false,
}

在减速器内的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中检查更多模式。

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

1 个答案: