組件未在道具更新時更新

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發送新道具的StoryItems 。 您正在變異React不知道的metrics變量，因此React將不知道重新呈現任何內容。

您應該將metrics變量保持為StoryContainer組件上的state ，然后使用setState進行更新。 對StoryContainer setState的調用將告訴React重新渲染它（因為其狀態已更改），這會將新的props傳遞給StoryItems 。