React+redux data rendering, react lifecycle usage issues

topic description

this is true. An individual is doing a case of react training. At present, there is page An and page B, and page A has the effect of another rotation graph, but when I jump to B, refresh page B, and then jump back to A, the state data set on page A cannot be obtained, because I put all the picture controls currently displayed in the state, so switch to page A, where there is no picture display.

sources of topics and their own ideas

because of the effect of this broadcast picture, I used componentWillReceiveProps to do it. I don"t know if there is a better way. Thank you

related codes

// 
import React, { Component } from "react"

import RGBaster from "common/js/rgbaster.js"


export default class Banner extends Component {
    constructor(props) {
        super(props)

        this.state = {
            sliderIndex: 1,
            nowImageUrl: "",
            sliderNum: 0,
            themeColor: ""
        }

        this.init = this.init.bind(this)
    }

    next = () => {
        let {sliderNum} = this.state
        let count = this.state.sliderIndex

        count PP
        if (count === sliderNum) count = 0
        this.init(count)
    }

    prev = () => {
        let {sliderNum} = this.state
        let count = this.state.sliderIndex

        count --
        if (count < 0) count = sliderNum - 1
        this.init(count)
    }

    initThemeColor = (url) => {
        let _this = this

        RGBaster.colors(url, {
            success: function(payload) {
                _this.setState({
                    themeColor: payload.dominant
                })
            }
        })
    }

    init = (count) => {
        let {datas} = this.props

        this.setState({
            sliderIndex: count,
            nowImageUrl: datas[count].imageUrl,
            sliderNum: datas.length
        })

        this.initThemeColor(datas[count].imageUrl)
    }
    
    componentWillReceiveProps() {
        console.log(datas); // 
        
        let {datas} = this.props
        let {sliderIndex} = this.state

        if (datas.length > 0) {
            this.init(sliderIndex)
        }
    }
    
    render() {
        let {datas} = this.props
        let {themeColor, sliderIndex, nowImageUrl, sliderNum} = this.state

        console.log(nowImageUrl); // 
        
        return (
            datas.length > 0
            ? (
                <div id="home_banner" ref="homeBanner" style={{backgroundColor: themeColor}}>
                    <div className="inner">
                        <div className="wrap">
                            <a href="-sharp" className="pic">
                                <img src={nowImageUrl} />
                            </a>
                            <a 
                                href="javascript： void(0);"
                                className="icon-banner btn btn-prev"
                                onClick={ev => this.prev()}
                            ></a>
                            <a 
                                href="javascript： void(0);"
                                className="icon-banner btn btn-next"
                                onClick={ev => this.next()}
                            ></a>
                        </div>
                        <ul className="nav">
                            {
                                datas.map((data, i) => {
                                    let cls = i === sliderIndex ? "active" : ""

                                    return (
                                        <li key={i} className={cls} onClick={ev => this.init(i)}></li>
                                    )
                                })
                            }
                        </ul>
                    </div>
                </div>
            ) : null
        )
    }
}

what result do you expect? What is the error message actually seen?

I think this should be caused by the wrong use of my lifecycle function, but I don"t seem to be able to try anything else. Thank you here.