Почему не работают элементы props если их рендерить в один стейт React?

Question

[Ninja Mate]

из родителя передаю метод и стейт, которые завязаны друг на друга. (нажимаем на кнопку с методом, он задает стейт)
Если делать все отдельно, то работает отлично

render() {
return (
    <div>
           
                            {this.state.subSectionCulturalSupport}
                            {this.props.PSSubSectionCulturalSupport}
                            
                            {this.state.subSectionFinancialSupport}
                            {this.props.PSSubSectionFinancialSupport}
                            
                            {this.state.subSectionCaseConference}
                            {this.props.PSSubSectionCaseConference}
                            
                            {this.state.subSectionDischargePlRef}
                            {this.props.PSSubSectionDischargePlRef}
                            
                            {this.state.subSectionCoordinateTravel}
                            {this.props.PSSubSectionCoordinateTravel}
                            
                            {this.state.subSectionPSDAMA}
                            {this.props.PSSubSectionPSDAMA}
    </div>

Хочу вывовить только релевантные пропсы и стейты, но когда пытаюсь присвоить все это одному стейту, то метод перестает работать с пропсами

componentWillMount(){
        
        if(this.props.chartName =='Patient Services') {

            this.setState({
                subSection: <div>
                    <Button block onClick={this.props.ConvertPDFSubReportCulturalSupport}>Add Cultural Support</Button>
                    {this.props.PSSubSectionCulturalSupport}
                    
                    <Button block onClick={this.props.ConvertPDFSubReportFinancialSupport}>Add FinancialSupport</Button>
                    {this.props.PSSubSectionFinancialSupport}
                    
                    <Button block onClick={this.props.ConvertPDFSubReportPSDAMA}>Add PSDAMA</Button>
                    {this.props.PSSubSectionPSDAMA}
                    
                    <Button block onClick={this.props.ConvertPDFSubReportCaseConference}>Add Case Conference</Button>
                    {this.props.PSSubSectionCaseConference}
                    
                    <Button block onClick={this.props.ConvertPDFSubReportDischargePlRef}>Add Discharge Planning/Referrals</Button>
                    {this.props.PSSubSectionDischargePlRef}
                    
                    <Button block onClick={this.props.ConvertPDFSubReportCoordinateTravel}>Add Coordinate Patient Travel</Button>
                    {this.props.PSSubSectionCoordinateTravel}
                </div>
            })
        }
    }

render() {
return (
    <div>
           //В этот стейт пытаюсь все задать, кнопки появляются, методы выполняются, но элементы из props перестали выводиться.
           {this.state.subSection}...

В чем моя ошибка?

Answer 1

[Aves]

componentWillMount выполняется только один раз.
Для реагирования на изменение свойств надо такой же код добавить в componentWillReceiveProps.

Comments

[Ninja Mate]

А как вот это можно под все пропсы прописать, а не каждому отдельно?

componentWillReceiveProps(nextProps) {
  this.setState({
    xxx: nextProps.xxx != this.props.xxx
  });
}

И обязательно все props в state задавать? можно просто вставлять как {this.props.xxx}?

[Aves]

Ninja Mate: вообще не понимаю зачем нужно props в state сохранять

[Ninja Mate]

Aves: а что тогда внутри componentWillReceiveProps делать?

[Aves]

Ninja Mate: то же самое, что и в componentWillMount только вместо this.props nextProps

[Ninja Mate]

Aves:

componentWillReceiveProps(nextProps){
        
        if(this.props.chartName =='Patient Services') {

            this.setState({
                subSection: <div>
                    <Button block onClick={this.props.ConvertPDFSubReportCulturalSupport}>Add Cultural Support</Button>
                    {nextProps.PSSubSectionCulturalSupport}

                    <Button block onClick={this.props.ConvertPDFSubReportFinancialSupport}>Add FinancialSupport</Button>
                    {nextProps.PSSubSectionFinancialSupport}

                    <Button block onClick={this.props.ConvertPDFSubReportPSDAMA}>Add PSDAMA</Button>
                    {nextProps.PSSubSectionPSDAMA}

                    <Button block onClick={this.props.ConvertPDFSubReportCaseConference}>Add Case Conference</Button>
                    {nextProps.PSSubSectionCaseConference}

                    <Button block onClick={this.props.ConvertPDFSubReportDischargePlRef}>Add Discharge Planning/Referrals</Button>
                    {nextProps.PSSubSectionDischargePlRef}

                    <Button block onClick={this.props.ConvertPDFSubReportCoordinateTravel}>Add Coordinate Patient Travel</Button>
                    {nextProps.PSSubSectionCoordinateTravel}
                </div>
            })
        }
    }

получилось, спасибо

Answer 2

[theWaR_13]

Возможно, что this указывает не туда, куда вы ожидаете. Попробуйте сделать в самом начале componentWillMount()
var _self = this, а внутри дивов вместо this.props пишите _self.props

UPD. А вообще, в React используются иные методы для того, чтобы при определенном условии отображать тот или иной html-код.

Comments

[Ninja Mate]

c this не сработало, указывает туда. иной метод вы имеете ввиду сразу их рендерить на страницу? да так работает, но при этом у меня получается слишком много кнопок стейтов и прочего висит на странице, хотел бы вывовить их отдельным методом, в зависимости от типа страницы.

[theWaR_13]

Ninja Mate: да, такая проблема есть. Попробуйте создавать отдельные компоненты, погуглите, может что-то еще люди придумали. Но я более чем уверен, что в стэйте хранить вот такой кусок html-кода это неверное решение, и должен быть какой-то другой путь. Я в свое время делал так, как по ссылке в ответе.

[Ninja Mate]

theWaR_13: так я и делаю, но получается около 50 функций и кнопок к ним... я протестую)

[theWaR_13]

Ninja Mate: увы, больше ничем помочь не могу :) Сейчас ковыряю Angular 2, там все это выглядит гораздо проще и лучше продумано, такой каши можно избежать.