child component does not rerender with shouldComponentUpdate

Question

My child component changes its state when its prop is changed. I want to re-render child component ImageSlide so call different string when state changes. The className is well changed and console shows the changed values well. But it does not rerender view.

I tried shouldComponentUpdate, but it did not work. How can I re-render ImageSlide?

let languages = {
    en: require('textEnglish'),
    kr: require('textKorean')
}

class ImageSlide extends Component {

constructor(props) {
    super(props);
    this.state={
        lang: this.props.lang,
        url: this.props.url
    }
}

languageSelect=()=> {
    if (this.state.lang === 'kr') {
        return 'kr';
    } else {
        return 'en';
    }   
}

static getDerivedStateFromProps(nextProps, prevState){
    if (nextProps.lang !== prevState.lang |
        nextProps.url !== prevState.url )
    {
        return  {lang : nextProps.lang, url: nextProps.url} ;
    }
}


shouldComponentUpdate(nextProps, nextState){
    return true;
 //I tried also:
 // if (nextProps.url !== this.state.url |
 // nextProps.lang !== this.state.lang)
 //     return true;
}

render() {
    const Text=languages[this.languageSelect()];
    return (    
        <div className="test-transition">
            {console.log(this.state.lang)}
            {console.log(this.state.url)}
            {console.log(Text["p1_3_"+String(this.state.url)])}
            <div className={`pic${this.state.url}`}>
                {Text["p1_3_"+String(this.state.url)]}              
            </div>
        </div>      
    );
}

}

score 0 · Answer 1 · answered Apr 09 '19 at 05:51

Check if the new props is changes or not using any of the lifecycle event like componentDidUpdate or shouldComponentUpdate or you can also try componentWillReceiveProps (not recommended since its deprecated)

componentDidUpdate()
    {
    /*Check for prev props condition*/
    this.forceUpdate(); /*this method renders the component*/
    }

child component does not rerender with shouldComponentUpdate

1 Answers1