親状態の変更で子コンポーネントが再レンダリングされない

Question

私は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には、状態が変更されたにもかかわらず、その小道具が更新されていません。それが私の持つ問題です。どんな助力も非常に感謝しています。

Answer 1

私が最初にすることは、

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> 
 
    ); 
 
}

Answer 2

私はあなたがES6クラスを混合し、React.createClassていると信じています。これらは、Reactコンポーネントを作成する2つの異なる方法です。

はこちらをご覧ください：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>; 
    } 
}); 

それを修正して、エラーが続くかどうかを確認 はここに違います。

Answer 3

私は問題の内容を見つけました。shouldComponentUpdate（）は常に可視化コンポーネントでfalseを返していました。もし誰かが似たような問題を抱えているなら、これが役に立ちます。