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

Question

我在react-redux应用程序的reducer文件中有一个switch case。我需要跟踪数组的全局索引并返回下一个和上一个项目。该问题基于当前代码，如下所示。初始化项目显示为“A”，然后接下来显示“B”，但此后索引停留在 1(项目 B)。另外，前一个索引未定义!您将如何使用 switch case 来实现此目的？

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 > 在轮播中，或者默认为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;
};