时间戳

首页 > 解决方案 > 子组件不使用 shouldComponentUpdate 重新渲染

reactjs - 子组件不使用 shouldComponentUpdate 重新渲染

问题描述

我的子组件在其 prop 更改时更改其状态。我想重新渲染子组件 ImageSlide 以便在状态更改时调用不同的字符串。className 更改得很好，控制台很好地显示了更改后的值。但它不会重新渲染视图。

我尝试了 shouldComponentUpdate，但没有成功。如何重新渲染 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>      
    );
}

}

标签： reactjsreact-lifecycle

解决方案

检查新道具是否发生变化或没有使用任何生命周期事件，例如componentDidUpdateorshouldComponentUpdate或者您也可以尝试componentWillReceiveProps（不推荐，因为它已弃用）

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

推荐阅读