创建块时不重新渲染保存功能

Question

在创建块时保存功能不会在前端重新渲染。我为保存创建了一个组件，该组件应在状态更改时重新呈现，但事实并非如此。编辑功能适合管理员使用。

基本上，setState函数对我不起作用。 我尝试加入样式，但对我也不起作用。

我的Save.js：

 const { Component } = wp.element;
import './MyCss.css';
const { Icon } = wp.components;
import unsplash from './unsplash';

export class Save extends React.Component {
    constructor(props) {
      super(props)

        this.state = {
        images: [], 
        currentIndex: 0,
            translateValue: 0,
            translateValueSmall: 0
      }
    }

    async componentDidMount(){
        const response  = await unsplash.get('/search/photos',{
            params:{query: "cat"},
        });
        response.data.results.map(result=>{     
            this.setState(prevState => ({
                images: [...prevState.images, result.urls.thumb]
            }))
        });
    }

    goToPrevSlide(){    
      console.log("previous slide");    
      if(this.state.currentIndex === 0)
        return;
      this.setState(prevState => ({
        currentIndex: prevState.currentIndex - 1,
            translateValue: prevState.translateValue + this.slideWidth(),
            translateValueSmall: prevState.translateValueSmall + this.slideWidthSmall()/2
      }))
    }

    goToNextSlide(){
      if(this.state.currentIndex === this.state.images.length - 1) {
        return this.setState({
        currentIndex: 0,
        translateValue: 0,
        translateValueSmall: 0
        })
        }
      this.setState(prevState => ({
        currentIndex: prevState.currentIndex + 1,
            translateValue: prevState.translateValue + -(this.slideWidth()),
          translateValueSmall: prevState.translateValueSmall + -(this.slideWidthSmall())/2      
      }));
    }

    slideWidth(){
      return document.querySelector('.slide').clientWidth
    }

    slideWidthSmall(){
      return document.querySelector('.sliders').clientWidth
    }

    render() {
      return (
            <div className="box" onClick={()=>this.goToPrevSlide()}>
                <div className="slider">
                    <div className="slider-wrapper"
                        style={{
                            transform: `translateX(${this.state.translateValue}px)`,
                            transition: 'transform ease-out 0.95s'
                        }}>
                        {
                            this.state.images.map((image, i) => (
                                <Slide key={i} image={image} />
                            ))
                        }
                    </div>
                </div>

                <div className="sliders">
                    <LeftArrow
                        goToPrevSlide={()=>this.goToPrevSlide()}
                    />

                    <RightArrow
                        goToNextSlide={()=>this.goToNextSlide()}
                    />
                    <div className="chaitali"
                            style={{
                                transform: `translateX(${this.state.translateValueSmall}px)`,
                                transition: 'transform ease-out 0.95s'
                            }}>
                            {
                                this.state.images.map((image, i) => (
                                    <Slide key={i} image={image} />
                                ))
                            }
                    </div>
                </div>
        </div>

      );
    }
}
    const Slide = ({ image }) => {
        const styles = {
            backgroundImage: `url(${image})`,
            backgroundSize: 'cover',
            backgroundRepeat: 'no-repeat',
            backgroundPosition: '50% 60%'
        }
        return <div className="slide" style={styles}></div>
        }

    const LeftArrow = (props) => {
        return (
            <div onClick={props.goToPrevSlide}>
                <Icon className="back arrow" icon="arrow-left"/>
            </div>
        );
            }

    const RightArrow = (props) => {
        return (
            <div onClick={props.goToNextSlide}>
                <Icon className="next arrow" icon="arrow-right"/>
            </div>
        );
    }