Carousel lost slick dot active status after request

[rdmclin2]

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

Reproduction link

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(() => {
      this.setState({
        projects: []
      });
    }, 1000);

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

  render() {
    const { projects } = this.state;
    return (
      <div>
        <Carousel>
          {projects.map(project => (
            <div>
              <h3>{project}</h3>
            </div>
          ))}
        </Carousel>
      </div>
    );
  }
}

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

[svengiebel]

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 :) )

[zombieJ]

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