组件未在道具更新时更新答案

【问题标题】：Component not updating on props update组件未在道具更新时更新
【发布时间】：2015-07-13 17:14:06
【问题描述】：

我正在尝试根据从其父项对其道具的更新来重新渲染组件。但是除非我使用 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。

【问题讨论】：

标签： javascript reactjs react-native

【解决方案1】：

当StoryContainer.handleClick 被调用时，并没有告诉 React 你需要重新渲染StoryContainer，这就是向StoryItems 发送新道具的原因。你正在改变 React 不知道的 metrics 变量，所以 React 不会知道重新渲染任何东西。

您应该在StoryContainer 组件上将metrics 变量保留为state，然后将其更新为setState。在 StoryContainer 上对 setState 的调用将告诉 React 重新渲染它（因为它的状态已经改变），这会将新的 props 传递给 StoryItems。

【讨论】：