Javascript 在父状态更改时不重新呈现子组件

我是一个新的反应者，在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>
    );
}
});

const indicatorsStudeCardContainer=React.createClass({
getInitialState（）{
返回{
陡峭的：{
社会：是的，
科技：是的，
经济：是的，
生态学：没错，
政治：真的
}, 
数据：指示符数据
}
}
渲染（）{
让props=this.props；
让state=this.state；
console.log（'STATE in StipCardContainer>>>'，this.STATE.data）；
//VisualizationContainer最终拥有不同的数据
返回(
点击下面的问题组以筛选数据可视化中可用的指标。再次点击以返回指标的完整列表。
);
}
});

以下是VisualizationContainer组件中的渲染方法：

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

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

render（）{
console.log（'props inside visualization container>>>'，this.props.data）；
返回(
绘图图
更新
);
}

此组件内部有另一个嵌套组件，称为IndicatorList，下面是该组件的代码：

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

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

render（）{
让props=this.props；
让keys=Object.keys（props.data）；
console.log（'props inside indicator list>>>'，props.data）；
让所有指示器=[]；
键。forEach（功能（键）{
var指标=Object.key（props.data[key]）；
所有指示器。推动（指示器）；
//控制台日志（所有指示器）；
});
让合并=[].concat.apply（[]，所有指示符）；
返回(
{
merged.map（（val，i）=>{
返回
})
}
);
}

最后，该组件返回另一个组件，它只是基于容器组件中的数据动态生成的DIV元素

 render () {

    return (
        <div> { this.props.value }</div>
    );
}

render（）{
返回(
{this.props.value}
);
}

---

我通过道具从StipCardContainer的状态传递这些组件使用的所有数据。最初加载页面时，数据向下传递，state.data中的所有内容都用作指示器组件中的项，指示器组件是层次结构中的最后一个嵌套组件。所以，我的问题是，在状态更改时，道具不会从StipeCardContainer组件更新。i、 e.状态发生了变化，我可以看到，但是道具没有更新——特别是VisualisatioContainer没有更新道具，即使状态发生了变化。这就是我面临的问题。非常感谢您的帮助

我要做的第一件事是

render（）{
让propsdThemeData=this.props.data.themeData；
让stateData=this.state.data；
console.log（'STATE in StipCardContainer>>>'，this.STATE.data）；
//VisualizationContainer最终拥有不同的数据
返回(
点击下面的问题组以筛选数据可视化中可用的指标。再次点击以返回指标的完整列表。
);
}

我相信您将ES6类和

React.createClass混用了起来。这是创建React组件的两种不同方法

请看这里：

我有点惊讶这一切。
区别在于：

ES6课程：

class HelloMessage extends React.Component {
  render() {
    return <div>Hello {this.props.name}</div>;
  }
}

const HelloMessage = React.createClass({
  render: function() {
    return <div>Hello {this.props.name}</div>;
  }
});

类HelloMessage扩展了React.Component{
render（）{
返回Hello{this.props.name}；
}
}

**

React.createClass:

class HelloMessage extends React.Component {
  render() {
    return <div>Hello {this.props.name}</div>;
  }
}

const HelloMessage = React.createClass({
  render: function() {
    return <div>Hello {this.props.name}</div>;
  }
});

const HelloMessage=React.createClass({
render:function（）{
返回Hello{this.props.name}；
}
});

修复该问题，然后查看错误是否仍然存在。
我刚刚发现问题所在，我在Visualization组件中shouldComponentUpdate（）始终返回false。如果有人有类似的问题，希望这能有所帮助
 第一个组件的
getInitialState
和
render
之间是否缺少逗号（
，
）？很高兴您找到了答案。但是，请注意我的回答并修复您的代码-这很重要。