时间戳

首页 > 解决方案 > 为什么使用 useRef 钩子定义的计数器在每次渲染时都不会递增？

javascript - 为什么使用 useRef 钩子定义的计数器在每次渲染时都不会递增？

问题描述

我正在尝试使用钩子 useRef() 来保留接下来要显示哪些项目的计数器，并在每次渲染时递增计数器，并使用计数器值对数组中的元素进行切片。在每次渲染时，计数器 index.current 应该增加 10，但在我的情况下，它没有增加，我一遍又一遍地得到相同的 10 个元素。我不知道为什么。这里的集合概览组件在集合预览组件上映射了 4 次。

//CollectionPreview

const CollectionPreview = ({title,movieItems,Counter}) =>  {
     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 mapStateToProps = state => ({
    movieItems: selectMovieItems(state),
})

export default connect(mapStateToProps)(CollectionPreview);


//CollectionOverview

class CollectionOverview extends React.Component {

render() {
    return (
        <div className="collection-overview">
            {
                CollectionData.map(items => 
                    <CollectionPreview key={items.id} title={items.title} />)
            }
        </div>

    );
}
}

export default CollectionOverview;

标签： javascriptarraysreactjsredux

解决方案

就我个人而言，我认为计算渲染的数量是不好的模式，因为渲染可以在不同的场合被多次调用，并且随着你的应用程序变得越来越大，很难跟踪每一次渲染调用。

我认为更好的方法是在某处拥有initialIndex或处于某种状态。pageIndex当你使用 Redux 时，我认为你应该把它放在 reducer 中并创建适当的操作来增加这个值。

推荐阅读