akiran / akiran/react-slick

Infinity loop on image click, in inner-slider.js

Offen
#1,815 1 Kommentar 2 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
Vorherrschende Sprache
JavaScript
Sterne
11.9k
Forks
2.1k
PR-Merge-Kennzahlen
Keine gemergten PRs in 30 T.

Beschreibung

I believe these lines of code inside `inner-slider.js`will cause an infinity loop at `prevClickHandler`. not entirely sure how I would go abouts fixing it but think would be good to bring to your attention.
It seems to be caused by the `componentDidUpdate()` which is triggered on load, and any click on the window, or resize of window.

My use case:
I have cards within the slider, if I click on the card, it should navigate to another page. However, just before it does that, an infinity loop occurs from the prevClickHandler.

How to produce loop:
When page loads, `componentDidUpdate`, when it runs through the first time,
- it will go into the `!image.onclick` condition, and we assign image.onClick to `image.parentNode.focus()`
- When I click around my app, or resize the window, `componentDidUpdate()` triggers again,
- now, my `const prevClickHandler` is assigned `() => {
prevClickHandler();
image.parentNode.focus();
};
`
- And NOW, when click an image, the click handler will be calling itself.

https://github.com/akiran/react-slick/blob/38c1b51996e2e8ff25d9f6a2241ac3b3034cb86d/src/inner-slider.js#L300
```
checkImagesLoad = () => {
let images = this.list.querySelectorAll(".slick-slide img");
let imagesCount = images.length,
loadedCount = 0;
Array.prototype.forEach.call(images, image => {
const handler = () =>
++loadedCount && loadedCount >= imagesCount && this.onWindowResized();
if (!image.onclick) {
image.onclick = () => image.parentNode.focus();
} else {
const prevClickHandler = image.onclick;
image.onclick = () => {
console.log('click') // Added for testing
prevClickHandler();
image.parentNode.focus();
};
}
```

I put a console log
![image](https://user-images.githubusercontent.com/46257909/83470361-90491a80-a4b4-11ea-81a3-24488cf642d3.png)

Beitragsleitfaden

Beitragsleitfaden öffnen

Bewertung

Dieses Issue wurde noch nicht bewertet.

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.