Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Carousel lost slick dot active status after request #16583

1 task
rdmclin2 opened this issue May 14, 2019 · 2 comments
1 task

Carousel lost slick dot active status after request #16583

rdmclin2 opened this issue May 14, 2019 · 2 comments


Copy link

@rdmclin2 rdmclin2 commented May 14, 2019

  • I have searched the issues of this repository and believe that this is not a duplicate.

Reproduction link

Edit on CodeSandbox

Steps to reproduce

The following steps simulate a normal http request

  1. initialize Carousel with empty slides
  2. send a http request
  3. father componet trigger rerender , with empty slides
  4. get the request back, and render with data.
import React, { PureComponent } from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import "./index.css";
import { Carousel } from "antd";

class Test extends PureComponent {
  state = {
    projects: []

  componentDidMount() {
    // 一秒后置空
    setTimeout(() => {
        projects: []
    }, 1000);

    // 两秒后设置数组后,默认选中丢失
    setTimeout(() => {
        projects: [1, 2, 3, 4, 5]
    }, 2000);

  render() {
    const { projects } = this.state;
    return (
          { => (

export default Test;

ReactDOM.render(<Test />, document.getElementById("container"));

What is expected?

Carousel renders the first slide and the first slick dot set active

What is actually happening?

Carousel renders the last slide and Lost slick dot active status


Environment Info
antd 3.18.1
React 16.9.0
System Mac
Browser Chrome 74.0.3729.131
Copy link

@svengiebel svengiebel commented May 14, 2019

You could give the Carousel a key Prop, to get it to properly rerender when the projects change:

<Carousel key={projects.length.toString()}>...

(I dont know if this is the best Solution, just a quick one i tried in your codesandbox :) )

Copy link

@zombieJ zombieJ commented May 14, 2019

Seems it's react-slick bug. Should add some workaround for this.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

4 participants