Javascript 如何在每次渲染组件时在数组中存储新项？

每次渲染组件时，我尝试在一个数组中存储10个项目。必须从索引0到9开始存储10个项目，然后必须删除这些项目，并且必须存储下10个项目，以便我可以映射从api接收的数据

我试着用地图链接一个过滤器，但它只对前10项有效

    //Update
    const CollectionPreview = ({title,movieItems}) =>  {
     const index = React.useRef(0)
     const movieData = movieItems.slice(index.current, index.current + 10)
     index.current += 10
    return (
        <div className="collection-preview">
            <h1 className="title">{title.toUpperCase()}</h1>
              <div className="preview"> 
                {console.log(movieData)}
              </div>
        </div>
    );
}

//更新
const CollectionPreview=（{title，movieItems}）=>{
const index=React.useRef（0）
const movieData=movieItems.slice（index.current，index.current+10）
指数电流+=10
返回(
{title.toUpperCase（）}
{console.log（movieData）}
);
}

简单的方法是使用此处详述的Array.splice方法：

例如：

var arr = [1,2,3,4,5,6,7,8,9,10,11,12];
var top10 = arr.splice(0 ,10);

console.log(arr); //[11, 12]
console.log(top10); //[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

---

在许多情况下，您不希望就地编辑外部数据。您可以使用hook useRef（）保留下一个要显示哪些项的计数器，并在每次渲染时递增计数器。可以使用slice（）从movieItems数组中提取项目，这不会修改原始数组

function MyComponent() {
    const index = React.useRef(0)

    const movieData = movieItems.slice(index.current, index.current + 10)

    index.current += 10
}

---

换句话说：你收到了大量来自API的记录，你只想用某种分页方式显示其中的10条？检查这一点，但现在我每次都得到相同的10个元素，有什么原因导致计数器在重新渲染时不更新吗？请检查更新，让我知道我做错了什么，谢谢。你的组件也重新安装了吗？当一个组件重新装载时，状态和引用不会被带入。我只是将它映射到另一个组件CollectionData.map（items=>）中，我看不出它不起作用的任何原因。我现在无法亲自尝试，但我想在其他地方可能会有问题。例如，如果父组件重新装载，子组件也将重新装载。