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

Closed
rdmclin2 opened this issue May 14, 2019 · 2 comments

Comments

Projects
None yet
4 participants
@rdmclin2
Copy link

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(() => {
      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
image

What is actually happening?

Carousel renders the last slide and Lost slick dot active status

image

Environment Info
antd 3.18.1
React 16.9.0
System Mac
Browser Chrome 74.0.3729.131
@svengiebel

This comment has been minimized.

Copy link

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

@zombieJ

This comment has been minimized.

Copy link
Member

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
You can’t perform that action at this time.