diff --git a/packages/semi-foundation/carousel/foundation.ts b/packages/semi-foundation/carousel/foundation.ts
index 73d125f841..e63777af3b 100644
--- a/packages/semi-foundation/carousel/foundation.ts
+++ b/packages/semi-foundation/carousel/foundation.ts
@@ -7,7 +7,8 @@ export interface CarouselAdapter<P = Record<string, any>, S = Record<string, any
     setNewActiveIndex: (activeIndex: number) => void;
     setPreActiveIndex: (activeIndex: number) => void;
     setIsReverse: (isReverse: boolean) => void;   
-    setIsInit: (isInit: boolean) => void   
+    setIsInit: (isInit: boolean) => void;
+    getChildren: () => any[]  
 }
 
 class CarouselFoundation<P = Record<string, any>, S = Record<string, any>> extends BaseFoundation<CarouselAdapter<P, S>, P, S> {
@@ -102,7 +103,7 @@ class CarouselFoundation<P = Record<string, any>, S = Record<string, any>> exten
     }
 
     getValidIndex(index: number): number {
-        const { children } = this.getStates();
+        const children = this._adapter.getChildren();
         return (index + children.length) % children.length;
     }
 
@@ -124,7 +125,7 @@ class CarouselFoundation<P = Record<string, any>, S = Record<string, any>> exten
 
     handleAutoPlay(): void { 
         const { autoPlay } = this.getProps(); 
-        const { children } = this.getStates();
+        const children = this._adapter.getChildren();
         const autoPlayType = typeof autoPlay;
         // when user manually call the play function, force play
         // only when carousel children length > 1 to start play
diff --git a/packages/semi-ui/carousel/_story/carousel.stories.jsx b/packages/semi-ui/carousel/_story/carousel.stories.jsx
index 09222e948f..927808c886 100644
--- a/packages/semi-ui/carousel/_story/carousel.stories.jsx
+++ b/packages/semi-ui/carousel/_story/carousel.stories.jsx
@@ -517,4 +517,23 @@ export const OnlyOneChildrenNotPlay = () => (
         <h3>1</h3>
       </div>
     </Carousel>
-);
\ No newline at end of file
+);
+
+export const renderStateInChildren = () => {
+  const [curIndex, setCurIndex] = useState(0);
+
+  return (
+    <Carousel style={style}
+      autoPlay={false}
+      activeIndex={curIndex}
+      onChange={(index) => {setCurIndex(index)}}>
+        {[1, 2, 3, 4].map((src, index) => {
+          return (
+            <div style={contentPinkStyle} key={index}>
+              {curIndex}
+            </div>
+          )
+        })}
+    </Carousel>
+  )
+};
\ No newline at end of file
diff --git a/packages/semi-ui/carousel/index.tsx b/packages/semi-ui/carousel/index.tsx
index fc3ec33b66..d5f8f22d2b 100644
--- a/packages/semi-ui/carousel/index.tsx
+++ b/packages/semi-ui/carousel/index.tsx
@@ -13,7 +13,6 @@ import isNullOrUndefined from '@douyinfe/semi-foundation/utils/isNullOrUndefined
 
 export interface CarouselState {
     activeIndex: number;
-    children: (ReactChild | ReactFragment | ReactPortal)[];
     preIndex: number;
     isReverse: boolean;
     isInit: boolean
@@ -23,7 +22,7 @@ class Carousel extends BaseComponent<CarouselProps, CarouselState> {
     static propTypes = {
         activeIndex: PropTypes.number,
         animation: PropTypes.oneOf(strings.ANIMATION_MAP),
-        arrowProps: PropTypes.object, 
+        arrowProps: PropTypes.object,
         autoPlay: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]),
         className: PropTypes.string,
         defaultActiveIndex: PropTypes.number,
@@ -69,7 +68,6 @@ class Carousel extends BaseComponent<CarouselProps, CarouselState> {
 
         this.state = {
             activeIndex: defaultActiveIndex,
-            children: this.getChildren(),
             preIndex: defaultActiveIndex,
             isReverse: false,
             isInit: true
@@ -93,6 +91,9 @@ class Carousel extends BaseComponent<CarouselProps, CarouselState> {
             },
             setIsInit: (isInit: boolean): void => {
                 this.setState({ isInit });
+            },
+            getChildren: (): any[] => {
+                return this.getChildren() as any[];
             }
         };
     }
@@ -109,19 +110,6 @@ class Carousel extends BaseComponent<CarouselProps, CarouselState> {
         this.handleAutoPlay();
     }
 
-    componentDidUpdate(prevProps: Readonly<CarouselProps>, prevState: Readonly<CarouselState>, snapshot?: any): void {
-        const prevChildrenKeys = React.Children.toArray(prevProps.children).map((child) =>
-            isValidElement(child) ? child.key : null
-        );
-        const nowChildrenKeys = React.Children.toArray(this.props.children).map((child) =>
-            isValidElement(child) ? child.key : null
-        );
-
-        if (!isEqual(prevChildrenKeys, nowChildrenKeys)) {
-            this.setState({ children: this.getChildren() });
-        }
-    }
-
     componentWillUnmount(): void {
         this.foundation.destroy();
     }
@@ -136,7 +124,7 @@ class Carousel extends BaseComponent<CarouselProps, CarouselState> {
         return this.foundation.stop();
     };
 
-    goTo = ( targetIndex: number): void => {
+    goTo = (targetIndex: number): void => {
         return this.foundation.goTo(targetIndex);
     };
 
@@ -147,7 +135,7 @@ class Carousel extends BaseComponent<CarouselProps, CarouselState> {
     next = (): void => {
         return this.foundation.next();
     };
-    
+
     handleAutoPlay = (): void => {
         if (!this.foundation.getIsControlledComponent()) {
             this.foundation.handleAutoPlay();
@@ -174,7 +162,7 @@ class Carousel extends BaseComponent<CarouselProps, CarouselState> {
 
     getChildren = (): (ReactChild | ReactFragment | ReactPortal)[] => {
         const { children: originChildren } = this.props;
-        return Children.toArray(originChildren).filter(child=>{
+        return Children.toArray(originChildren).filter(child => {
             return React.isValidElement(child);
         });
     }
@@ -186,14 +174,16 @@ class Carousel extends BaseComponent<CarouselProps, CarouselState> {
 
     renderChildren = () => {
         const { speed, animation } = this.props;
-        const { activeIndex, children, preIndex, isInit } = this.state;
+        const { activeIndex, preIndex, isInit } = this.state;
+
+        const children = this.getChildren();
 
         return (
             <>
                 {children.map((child: any, index: number) => {
                     const isCurrent = index === activeIndex;
                     const isPrev = index === this.getValidIndex(activeIndex - 1);
-                    const isNext = index === this.getValidIndex(activeIndex + 1); 
+                    const isNext = index === this.getValidIndex(activeIndex + 1);
 
                     const animateStyle = {
                         transitionTimingFunction: 'ease',
@@ -223,12 +213,13 @@ class Carousel extends BaseComponent<CarouselProps, CarouselState> {
     }
 
     renderIndicator = () => {
-        const { children, activeIndex } = this.state;
+        const { activeIndex } = this.state;
         const { showIndicator, indicatorType, theme, indicatorPosition, indicatorSize, trigger } = this.props;
 
         const carouselIndicatorCls = cls({
             [cssClasses.CAROUSEL_INDICATOR]: true
         });
+        const children = this.getChildren();
 
         if (showIndicator && children.length > 1) {
             return (
@@ -250,15 +241,15 @@ class Carousel extends BaseComponent<CarouselProps, CarouselState> {
     }
 
     renderArrow = () => {
-        const { children } = this.state;
         const { showArrow, arrowType, theme, arrowProps } = this.props;
+        const children = this.getChildren();
 
         if (showArrow && children.length > 1) {
             return (
-                <CarouselArrow 
-                    type={arrowType} 
-                    theme={theme} 
-                    prev={this.prev} 
+                <CarouselArrow
+                    type={arrowType}
+                    theme={theme}
+                    prev={this.prev}
                     next={this.next}
                     arrowProps={arrowProps}
                 />
@@ -277,19 +268,19 @@ class Carousel extends BaseComponent<CarouselProps, CarouselState> {
         });
 
         return (
-            <div 
+            <div
                 // role='listbox'
                 // tabIndex={0}
-                className={carouselWrapperCls} 
-                style={style} 
+                className={carouselWrapperCls}
+                style={style}
                 onMouseEnter={debounce(this.handleMouseEnter, 400)}
                 onMouseLeave={debounce(this.handleMouseLeave, 400)}
                 {...this.getDataAttr(this.props)}
-                // onMouseEnter={this.handleMouseEnter}
-                // onMouseLeave={this.handleMouseLeave}
-                // onKeyDown={e => this.foundation.handleKeyDown(e)}
+            // onMouseEnter={this.handleMouseEnter}
+            // onMouseLeave={this.handleMouseLeave}
+            // onKeyDown={e => this.foundation.handleKeyDown(e)}
             >
-                <div 
+                <div
                     className={cls([`${cssClasses.CAROUSEL_CONTENT}-${animation}`], {
                         [`${cssClasses.CAROUSEL_CONTENT}`]: true,
                         [`${cssClasses.CAROUSEL_CONTENT}-reverse`]: slideDirection === 'left' ? isReverse : !isReverse,