Two children with the same key error when using row, lazyLoading and infinite.

[lioryemini]

Hi,

I'm opening this issue as a sequel to a bug that has already opened #1422 by @houkanshan.
Unfortunately, this bug has been automatically marked as stale by a bot, because it has not had recent activity.

Reference for all details at #1422

Checkout this codesandbox:
https://codesandbox.io/s/k5k9q6q07o

The setting is:

const setting = {
  slidesToShow: 1,
  slidesToScroll: 1,
  infinite: true,
  lazyLoad: true,
  row: 1,
  slidesPerRow: 4
};

The error occurs when switching between slides (see console):

This issue also occurred to me (latest version - 0.28.0), and breaking my carousel (duplicate "data-index" on dom) when it happens.

His solution for adding a prefix to the fallback key on "track.js" file, solve it.

Original code:

var getKey = function getKey(child, fallbackKey) {
  return child.key || fallbackKey;
};

After fix:

var getKey = function getKey(child, fallbackKey) {
  return child.key || 'fallback-' + fallbackKey;
};

Can we add it to next version fix please?
Should change the original bug status to "Open"?

Thanks!

[sozdayka]

@lioryemini I added your changes in the PR for fix this bug

Hi, @akiran
can you check this pull request? thanks 🙏

[dm-kharkov]

Thanks @lioryemini and @sozdayka, it works for me!

@akiran Could You look on that PR please and merge that branch into the master ?
Thanks!

[VanTranTrucPhuong]

@akiran, Could you help fix the issue in your source? It works well, but I must manually fix it in my source.