javascript - 每次渲染组件时如何将新项目存储在数组中？

Question

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

我尝试将过滤器与 map 链接起来，但它仅适用于前 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>
    );
}

Answer 1

在许多情况下，您不希望就地编辑外部数据。您可以使用钩子(Hook) useRef() 来保存接下来要显示的项目的计数器，并在每次渲染时递增计数器。可以使用 slice() 从 movieItems 数组中获取项目，这不会修改原始数组。

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

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

    index.current += 10
}