组件不更新道具更新

Question

我试图基于从其父级更新道具来重新渲染组件.但除非我使用forceUpdate(),否则我无法让组件自行重新渲染.

这是我更新组件并将其传递给子组件的组件:

var StoryContainer = React.createClass({

    propTypes: {
        currentItem: React.PropTypes.number.isRequired
    },

    componentWillMount: function(){
        metrics.currentItem = 0;
        metrics.nextItem = 2;
    },

    handleClick: function(ctx){
        metrics.currentItem++;
        metrics.nextItem++;

        var data = this.props.data.slice(metrics.currentItem, metrics.nextItem);
        data[0].idx = metrics.currentItem
        data[1].idx = metrics.nextItem - 1;
        console.log(ctx);
        ctx.props.data = data;
        ctx.props.idx = metrics.currentItem;
        // this.forceUpdate();
    },

    render: function(){
        return (
            <StoryItems data={this.props.data.slice(metrics.currentItem,metrics.nextItem)} onChange={this.handleClick} />
        )   
    }
});

这是我传递更新道具的类.

var StoryItems = React.createClass({
    componentWillReceiveProps: function(nextProps){
        console.log(nextProps);
    },
    componentWillMount: function(a){
        console.log('StoryItems:componentWillMount', a);
    },
    componentDidMount: function(a){
        console.log('StoryItems:componentDidMount', a);
    },
    shouldComponentUpdate: function(nextProps){
        console.log('StoryItems:shouldComponentUpdate', nextProps);
        return true;
    },
    render: function(){
        return (
            <View style={styles.wrapper}>
                <Story data={this.props.data[1]} onChange={this.handleItemUnmount} />
                <Story data={this.props.data[0]} onChange={this.handleItemUnmount} />
            </View>
        );
    },
    handleItemUnmount: function(ctx){
        // console.log('here', ctx);
        this.props.onChange(this);
    },

});

module.exports = StoryItems;

谁能发现错误？在这里反应n00b.

Answer 1

当StoryContainer.handleClick调用时,没有做任何事情来告诉React你需要重新渲染StoryContainer,这就是发送新道具的原因StoryItems.你正在改变metricsReact不知道的变量,所以React不会知道重新渲染任何东西.

你应该保持metrics变量state上StoryContainer的组件,然后更新用setState.对setStateon 的调用StoryContainer将告诉React重新渲染它(因为它的状态已经改变)并且将传递新的道具StoryItems.