Question

我正在尝试使用hook 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;

Answer 1

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

我认为更好的方法是在某个地方的某个状态下使用initialIndex或pageIndex。在使用Redux时，我认为您应该将其放入reducer并创建适当的操作以增加该值。

为什么用useRef钩子定义的计数器在每个渲染器上不递增？

1 个答案: