[英]React child component not re-rendering on parent state change
我是React的新手,在SO中查看了類似的問題,找不到任何問題。 這可能是微不足道的,但請耐心等待。
我有嵌套組件
const IndicatorsSteepCardContainer = React.createClass({
getInitialState () {
return {
steep: {
Social: true,
Tech: true,
Economy: true,
Ecology: true,
Politics: true
},
data: indicatorData
}
}
render () {
let props = this.props;
let state = this.state;
console.log('STATE inside steepcardcontainer >>>>', this.state.data);
// VisualisationContainer to have different data eventually
return (
<div className="indicators">
<h3 className="description-text">Tap on an issue group below to filter indicators available in the data visualisation. Tap it again to return to the full list of indicators.</h3>
<div className='steep container steep-container'>
<SteepCard selected={ this.selectedSteeps } steep="Social" data={ props.data.themeData } class="yellow" title="Social" steepIcon={ SocialIcon } />
<SteepCard selected={ this.selectedSteeps } steep="Tech" data={ props.data.themeData } class="blue" title="Tech" steepIcon={ TechIcon }/>
<SteepCard selected={ this.selectedSteeps } steep="Economy" data={ props.data.themeData } class="pink" title="Economy" steepIcon={ EconomyIcon } />
<SteepCard selected={ this.selectedSteeps } steep="Ecology" data={ props.data.themeData } class="green" title="Ecology" steepIcon={ EcologyIcon } />
<SteepCard selected={ this.selectedSteeps } steep="Politics" data={ props.data.themeData } class="orange" title="Politics" steepIcon={ PoliticsIcon } />
</div>
<VisualisationContainer data={this.state.data}/>
</div>
);
}
});
這是VisualisationContainer組件中的render方法:
render () {
console.log('props inside visualisation-container>>>', this.props.data);
return (
<div className='visualisation-container'>
<div className="render-button" onTouchTap= { this.d3It.bind(null, this.selectedSteeps) }>
Plot graph
</div>
<div className="update-button" onTouchTap= { this.update.bind(null, this.selectedSteeps) }>
Update
</div>
<div className="indicator-items">
<IndicatorList data={this.props.data} className="indicator-list" />
<SelectedIndicators visible={true} onClick={this.toggleVisibility}/>
</div>
</div>
);
}
該組件內部有另一個嵌套組件,名為IndicatorList,這是該組件的代碼:
render () {
let props = this.props;
let keys = Object.keys(props.data);
console.log('props inside indicator-list>>>', props.data);
let allIndicators = [];
keys.forEach(function(key){
var indicators = Object.keys(props.data[key]);
allIndicators.push(indicators);
// console.log(allIndicators);
});
let merged = [].concat.apply([], allIndicators);
return (
<div className="indicator-list">
{
merged.map((val, i) => {
return <Indicator className="indicator-name" key={i} value={val} />
})
}
</div>
);
}
最后,該組件返回另一個組件,它只是基於SteepCardContainer組件中的數據動態生成的DIV元素。
render () {
return (
<div> { this.props.value }</div>
);
}
我通過SteepCardContainer狀態的道具傳遞這些組件使用的所有數據。 最初,當頁面被加載時,數據被傳遞下來,state.data中的所有內容都被用作指示符組件中的項目,這是層次結構中的最后一個嵌套組件。 所以,我的問題是在狀態改變時,道具不會從steepcardcontainer組件更新。 即狀態改變,我可以看到,但道具沒有更新 - 特別是VisualisatioContainer沒有更新道具,即使狀態改變。 這就是我所擁有的問題。 很感謝任何形式的幫助。
我要做的第一件事就是。
render () { let propsdThemeData = this.props.data.themeData; let stateData = this.state.data; console.log('STATE inside steepcardcontainer >>>>', this.state.data); // VisualisationContainer to have different data eventually return ( <div className="indicators"> <h3 className="description-text">Tap on an issue group below to filter indicators available in the data visualisation. Tap it again to return to the full list of indicators.</h3> <div className='steep container steep-container'> <SteepCard selected={ this.selectedSteeps } steep="Social" data={ propsdThemeData } class="yellow" title="Social" steepIcon={ SocialIcon } /> <SteepCard selected={ this.selectedSteeps } steep="Tech" data={ propsdThemeData } class="blue" title="Tech" steepIcon={ TechIcon }/> <SteepCard selected={ this.selectedSteeps } steep="Economy" data={ propsdThemeData } class="pink" title="Economy" steepIcon={ EconomyIcon } /> <SteepCard selected={ this.selectedSteeps } steep="Ecology" data={ propsdThemeData } class="green" title="Ecology" steepIcon={ EcologyIcon } /> <SteepCard selected={ this.selectedSteeps } steep="Politics" data={ propsdThemeData } class="orange" title="Politics" steepIcon={ PoliticsIcon } /> </div> <VisualisationContainer data={stateData}/> </div> ); }
我相信你正在混合使用ES6類和React.createClass
。 這是創建React組件的兩種不同方法。
請參見: https : //facebook.github.io/react/docs/reusable-components.html#es6-classes
我對這次跑步感到很驚訝。 這是區別:
ES6課程:
class HelloMessage extends React.Component {
render() {
return <div>Hello {this.props.name}</div>;
}
}
**
React.createClass:
const HelloMessage = React.createClass({
render: function() {
return <div>Hello {this.props.name}</div>;
}
});
修復此問題並查看錯誤是否仍然存在。
我剛剛發現了問題所在,我讓shouldComponentUpdate()總是在可視化組件中返回false。 希望如果有人遇到類似問題,這會有所幫助。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.