developerdizzle / react-virtual-list

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

no dist dir #44

Closed uinz closed 7 years ago

uinz commented 7 years ago

hi, I am using "version": "2.0.0"

  1. did not have dist dir

  2. observable list is not an array obj, when I use mobx


image

image

Warning: Failed prop type: Invalid prop `items` of type `object` supplied to `vlist`, expected `array`.
    in vlist (created by News)
    in News (created by inject-News-with-newsStore)
    in inject-News-with-newsStore (created by Route)
    in Route (created by Home)
    in div (created by Home)
    in Home (created by inject-Home-with-newsStore)
    in inject-Home-with-newsStore (created by Route)
    in Route (created by App)
    in div (created by App)
    in Router (created by HashRouter)
    in HashRouter (created by App)
    in App
    in Provider
    in AppContainer
developerdizzle commented 7 years ago

Main script will be fixed in the next release! I'll look into supporting mobx lists (possibly a shape with map).

Edit: please see version 2.2.0

developerdizzle commented 7 years ago

I have no experience with mobx, but after doing some quick research, it looks like there are may be two options:

Change

PropTypes.array.isRequired

to

PropTypes.shape({
  map: PropTypes.func.isRequired,
  length: PropTypes.number.isRequired,
})

or

Instruct mobx users to use slice on their arrays before using them in this component. From the mobx documentation on arrays:

Bear in mind however that Array.isArray(observable([])) will yield false, so whenever you need to pass an observable array to an external library, it is a good idea to create a shallow copy before passing it to other libraries or built-in functions (which is good practice anyway) by using array.slice(). In other words, Array.isArray(observable([]).slice()) will yield true.

@uinz - as a mobx dev, do you have any thoughts on which makes more sense?

uinz commented 7 years ago

@developerdizzle

sorry, I am unskilled with mobx

I think use .slice() to avoid type inspection error is the right way

developerdizzle commented 7 years ago

No need to apologize! I've started a list of best practices, which includes this slice technique, here https://github.com/developerdizzle/react-virtual-list/issues/45