后退/前进按钮代码异常：点击后退按钮无响应问题排查

看起来你的后退/前进按钮逻辑和需求的数组操作方向搞反了，这就是点击后退没出现预期效果的原因。我们来一步步修正：

核心问题点 #

你的需求里明确要求：

• 后退时，把currentFolderFlow的最后一项移到backFolders的头部
• 前进时，把backFolders的对应项移回currentFolderFlow

但你当前的代码是把后退的元素加到backFolders的尾部，前进时又取尾部的元素，这完全不符合需求的逻辑，导致数组变化和你预期的不一样，看起来就像按钮没反应。

修正后的代码 #

<script>
let currentFolderFlow = ["Element 1", "Element 2", "Element 3", "Element 4"]
let backFolders = []

const back = () => {
    // 确保至少保留一个元素（对应按钮的disabled条件，代码层面再加一层更稳妥）
    if (currentFolderFlow.length <= 1) return;
    
    const lastFolder = currentFolderFlow[currentFolderFlow.length - 1];
    // 把元素添加到backFolders的头部
    backFolders = [lastFolder, ...backFolders];
    // 移除currentFolderFlow的最后一个元素
    currentFolderFlow = currentFolderFlow.slice(0, -1);
}

const forward = () => {
    if (backFolders.length === 0) return;
    
    // 从backFolders的头部取出元素（因为后退时是往头部加的）
    const firstFolder = backFolders[0];
    currentFolderFlow = [...currentFolderFlow, firstFolder];
    // 移除backFolders的第一个元素
    backFolders = backFolders.slice(1);
}
</script>

<button class="btn hover:bg-base-300 bg-transparent border-0 {currentFolderFlow.length === 1 ? 'btn-disabled': 'text-base-content'}" on:click={back}>
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
        <path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18" />
    </svg>
</button>

<button class="btn hover:bg-base-300 bg-transparent border-0 {backFolders.length === 0 ? 'btn-disabled' : 'text-base-content'}" on:click={forward}>
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
        <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3" />
    </svg>
</button>

关键修改说明 #

1. 后退函数：

   • 新增安全判断（虽然按钮有disabled状态，但代码层面再加一层防护更稳妥）
   • 修改backFolders的赋值逻辑为[lastFolder, ...backFolders]，确保元素被添加到数组头部

2. 前进函数：

   • 同样新增安全判断
   • 从backFolders的头部取元素（backFolders[0]），匹配后退时的头部添加逻辑
   • 使用slice(1)移除backFolders的第一个元素，替代原来的尾部移除逻辑

3. 按钮点击事件：

   • 简化了on:click的写法，直接写on:click={back}和on:click={forward}即可，不需要额外的箭头函数包裹

这样修改后，数组的变化就完全符合你的需求了，点击后退和前进按钮就能看到预期的效果啦。

内容的提问来源于stack exchange，提问作者user20840709