私はReactを初めて使う人で、同様の質問を見て、何も見つかりませんでした。これは些細なことかもしれませんが、私に負担してください。私はここで部品親状態の変更で子コンポーネントが再レンダリングされない
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>
);
}
});
を入れ子にしている
はrenderメソッドがVisualisationContainerコンポーネントである:
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要素である別のコンポーネント。
これらのコンポーネントで使用されるすべてのデータをSteepCardContainerの状態の小道具で渡しています。最初にページがロードされると、データが渡され、state.data内のすべてがインジケータコンポーネントの項目として使用されます。インジケータコンポーネントは、階層内で最後にネストされたコンポーネントです。だから、私の問題は、ステートチェンジでは、steepcardcontainerコンポーネントから小道具が更新されないということです。状態が変わっても、私はそれを見ることができますが、小道具は更新されません。特に、VisualisatioContainerには、状態が変更されたにもかかわらず、その小道具が更新されていません。それが私の持つ問題です。どんな助力も非常に感謝しています。
最初のコンポーネントの 'getInitialState'と' render'の間にカンマ( '、')がありませんか? – Neta