дочерний компонент не рендерится с shouldComponentUpdate - PullRequest
Новая
       18

дочерний компонент не рендерится с shouldComponentUpdate

0 голосов
/ 09 апреля 2019

Мой дочерний компонент меняет свое состояние, когда изменяется его пропеллер. Я хочу перерисовать дочерний компонент ImageSlide, поэтому при изменении состояния вызывайте другую строку. ClassName хорошо изменено, и консоль хорошо показывает измененные значения. Но это не повторяет представление.

Я попытался долженComponentUpdate, но это не сработало. Как я могу перерисовать 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>      
    );
}

}

1 Ответ

0 голосов
/ 09 апреля 2019

Проверьте, изменяется ли новый реквизит или не используется какое-либо событие жизненного цикла, такое как componentDidUpdate или shouldComponentUpdate, или вы также можете попробовать componentWillReceiveProps (не рекомендуется, поскольку оно устарело) 

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