Question

我是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没有更新道具，即使状态改变了。这就是我所拥有的问题。很感谢任何形式的帮助。

Answer 1

我要做的第一件事是。

＆＃13;

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

＆＃13;

Answer 2

我相信您正在混合使用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>;
  }
});

修复此问题并查看错误是否仍然存在。

Answer 3

我刚刚发现了问题所在，我让shouldComponentUpdate（）总是在可视化组件中返回false。希望如果有人遇到类似问题，这会有所帮助。

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

3 个答案: