Infinity loop on image click, in inner-slider.js
- 主要语言
- JavaScript
- 星标
- 11.9k
- 派生
- 2.1k
- PR 合并指标
- 30 天内没有已合并 PR
描述
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

贡献指南
评估
这个 Issue 还没有评估数据。