items in props are cleared if press "back" or "previous page"

[FrankChung]

As title,

for example in the demo page, if press "back" in the PhotoSwipe view and then the gallery cannot be opened again.

after dip, the reason is:

this.photoSwipe.items.length = 0;
    items.forEach((item) => {
      this.photoSwipe.items.push(item);
    });

this.photoSwipe.items.length = 0;

this line will clean the items.

[mbrochh]

We encountered this bug as well. Before, we were mounting PhotoSwipe like this:

      <PhotoSwipe
        isOpen={isOpen}
        items={this.state.items}
        onClose={() => onClose()}
        options={options}
      />

And whenever we closed PhotoSwipe, this.state.items suddenly became an empty array, even though none of our this.setState calls in our own component were triggered.

It turns out, we seem to be passing in a reference to the item and when PhotoSwipe internally wipes that array, it also gets wiped in our calling component. We simply added .slice(0) to pass in a clone of the array and not a reference to the original array like this:

      <PhotoSwipe
        isOpen={isOpen}
        items={items.slice(0)}
        onClose={() => onClose()}
        options={options}
      />

Maybe that will help someone save a few hours of head-scratching in the future....

Maybe important: We only experienced this issue when we opened the page that has the PhotoSwipe directly, by typing in the URL. That means, the user sees the server side rendered result first and then the bundle picks up after a while and probably somehow re-mounts PhotoSwipe.

When we just click around on our site and then navigate to the page that has the PhotoSwipe, this bug does not happen. So it seems like SSR does trip up PhotoSwipe in some way.