developerdizzle / react-virtual-list

Super simple virtualized list React component
http://developerdizzle.github.io/react-virtual-list/
MIT License
617 stars 71 forks source link

Data list not render all of them. #50

Closed rahmatkruniawan closed 7 years ago

rahmatkruniawan commented 7 years ago

I have a more 1000 items . But when I rendered use VirtualList not show all of item I have this my screenshot : http://pasteboard.co/4aGIaY5Dy.jpg

`render(){

    const MyList = ({
      virtual,
      itemHeight,
    }) => (
      <ul style={virtual.style}>
        {virtual.items.map(item => (
          <li key={`item_${item.id}`} style={{height: itemHeight}}>
            Lorem ipsum dolor sit amet
          </li>
        ))}
      </ul>
    );
    const MyVirtualList = VirtualList()(MyList);

return (
      <div >

        <MyVirtualList
          items={this.state.sourceList}
          itemHeight={10}
        />
      </div>
  )

}`

developerdizzle commented 7 years ago

Hi @rahmatkruniawan,

Is there a scrollbar to the right? Can you verify that there are height and padding-top styles on the <ul> being rendered?

rahmatkruniawan commented 7 years ago

@developerdizzle there's no style on <ul>if I add some height style on the <ul> The data looks truncated if I scrool to bottom of <ul>. when scrool down auto load not working maybe that's is the problem

rahmatkruniawan commented 7 years ago

When add parameter like in your docs . I got some error ;

Uncaught TypeError: Cannot read property 'addEventListener' of undefined at vlist.componentDidMount (VirtualList.js:106) at eval (ReactCompositeComponent.js:265) at measureLifeCyclePerf (ReactCompositeComponent.js:75) at eval (ReactCompositeComponent.js:264) at CallbackQueue.notifyAll (CallbackQueue.js:76) at ReactReconcileTransaction.close (ReactReconcileTransaction.js:80) at ReactReconcileTransaction.closeAll (Transaction.js:206) at ReactReconcileTransaction.perform (Transaction.js:153) at ReactUpdatesFlushTransaction.perform (Transaction.js:140) at ReactUpdatesFlushTransaction.perform (ReactUpdates.js:89)

developerdizzle commented 7 years ago

Hey @rahmatkruniawan, sorry to be a pain, but could you share you entire component source?