Suwaka React-slick pozostaje na tej samej stronie, jeśli zmieniono elementy slajdu

Question

Utknąłem z problemem z reakcją-śliską. Temat może nie mieć sensu, ale postaram się wyjaśnić szczegółowo ten scenariusz. Zobacz ten przykład: fiddle, aby wyświetlić problem w działaniu.

var DemoSlider = React.createClass({ 
getSlides(count) { 
var slides = []; 
for(var i = 0; i < count; i++) { 
    slides.push((<img key={i} src='http://placekitten.com/g/400/200' />)); 
} 
return slides; 
}, 

render: function() { 
var settings = { 
    dots: false, 
    infinite: false, 
    slidesToShow: 3, 
    slidesToScroll: 3 
} 

var slides = this.getSlides(this.props.count); 

return (
    <div className='container'> 
    <Slider {...settings}> 
     { slides } 
    </Slider> 
    </div> 
); 
} 
}); 

W tym pokazie początkowo suwak pokazuje 20 slajdów (3 na stronę). Chodzi o to, że jeśli klikniesz przycisk, wygeneruje on losową liczbę, która byłaby nową liczbą slajdów. Kod jest dość prosty i nie wymaga objaśnień.

Aby odtworzyć problem, 1. Klikaj przycisk Dalej, aż dojdziesz do ostatniego slajdu.
2. Kliknij przycisk "Kliknij", aby wygenerować nową losową liczbę slajdów.

Spodziewałem się, że slajd wróci do pierwszego slajdu, ale nie zostanie na stronie, na której był poprzednio. Co gorsza, jeśli nowa liczba slajdów jest mniejsza niż poprzednia liczba, użytkownik zobaczy pustą stronę bez slajdów. Po kliknięciu przycisku Poprzedni błąd może on przejść do poprzednich slajdów, a wszystko działa normalnie, ale początkowy ekran zakłóca działanie użytkownika.

Czy jest coś, czego mi brakuje, aby dodać kod, czy jest to błąd?

Dzięki, Abhi.

Answer 1

Powiedziałbym, że to raczej zachowanie buggy, ale nadal można osiągnąć to, co chcesz przez wymuszanie odrysowywanie po nowa kolekcja została przekazana jako props, resetując reagować na key:

<DemoSlider key={Date.now()} count={this.state.count}/> 

UPDATED FIDDLE

Answer 2

Szybkie obejście: Po przejściu na nowy zestaw slajdów należy usunąć komponent i ponownie go zrekonstruować. Zacznie się od pierwszego slajdu. Możesz to zrobić, zwiększając atrybut key z DemoSlider.

Aby uzyskać poprawną poprawkę, musisz powiedzieć komponentowi, aby zmienił "bieżący slajd", tak aby nie patrzył na indeks slajdów poza końcem, ale zwykłe spojrzenie na źródło pod adresem https://cdnjs.cloudflare.com/ajax/libs/react-slick/0.11.0/react-slick.js sugeruje, że obecnie nie pozwala na to. Należy wprowadzić zmianę na InnerSlider.componentWillReceiveProps(), aby sprawdzić state.currentSlide przed props.slidesToShow i state.slideCount.

Przydałoby się również zezwolenie na przyjęcie currentSlide jako rekwizytów.