Question

我在reducer文件中有一个用于react-redux应用程序的switch case。我需要跟踪数组的全局索引并返回下一个和上一个项。该问题基于如下的当前代码。初始项目显示为＆＃39; A＆＃39;然后在接下来它显示＆＃39; B＆＃39;然而，在此之后，指数停留在1（项目B）。同样对于前一个索引是未定义的！你会如何使用开关盒来实现这个目标？

export default function(state = {}, action){

const carousel =['A','B','C','D', 'E'];
let index = 0;

switch(action.type){
    case INIT_ITEM:
        return carousel[index];
    case NEXT_ITEM:
        index = index + 1;
        return carousel[index];
    case PREV_ITEM:
        index = index - 1;
        return carousel[index];
}

return state;
};

Answer 1

您的代码实际上并未将index值存储在状态中，而是将值存储在轮播索引处。

因此，每次启动代码时，index为0.要解决此问题，请获取当前的state值，然后在index中找到相应的carousel，或者默认为0，其中值不存在。

此外，在调用上一个和下一个操作时，您需要考虑到达数组的开头和结尾。

export default function(state = null, action) {
    const carousel =['A','B','C','D','E'];
    let index = Math.max(0, carousel.indexOf(state));

    switch(action.type){
        case INIT_ITEM:
            return carousel[index];
        case NEXT_ITEM:
            index = Math.min(index + 1, carousel.length - 1);
            return carousel[index];
        case PREV_ITEM:
            index = Math.max(index - 1, 0);
            return carousel[index];
    }

    return state;
};

使用switch case跟踪数组的全局索引

1 个答案: