时间戳

首页 > 解决方案 > 每次渲染组件时如何将新项目存储在数组中？

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>
    );
}

标签： javascriptarraysreactjs

解决方案

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

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

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

    index.current += 10
}

推荐阅读