我如何获得不均匀数组的下四个项目然后环绕？ （具有设定范围选择的阵列轮播）

Question

我有一个包含 13 个项目的数组，我想一次显示其中的四个。第一次应该是 [0, 1, 2, 3]，下次刷新应该是 [4, 5, 6, 7]。在 [8, 9, 10, 11] 之后应该显示 [12, 0, 1, 2]。基本上我想要一个子数组中的四个项目

我希望能够在这个数组中循环，并始终获得后续的 4 个项目。我的环绕部分有问题！我发现很难“重置”为零，但如果有意义的话，将余数添加到下一个剩余元素中。

我已经尝试使用 % 运算符并获得余数。但老实说，我在这里很迷路！我将不胜感激 js 或类似解决方案的帮助。

编辑：在@Bamars 的帮助下尝试过：

 const [offSetIndex, setOffSetIndex] = useState<number>(0);  
  
  const handleRefreshMeals = () => {
    const end = (offSetIndex + 4) % meals.length;
    let result = []

    if(end < offSetIndex) {
      result = meals.slice(offSetIndex).concat(meals.slice(0, end))
    } else {
      result = meals.slice(offSetIndex, offSetIndex + 4);
    }

    setOffSetIndex(offSetIndex + 4)
    setCurrentMeals(result)
  };

但我显然做错了什么

Answer 1

当你保存更新的索引时，你并没有环绕。替换

setOffSetIndex(offSetIndex + 4)

与

setOffSetIndex(end)