Javascript 道具更新时组件未更新

我正在尝试根据父组件对道具的更新来重新渲染组件。但是，除非我使用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 StoryContainer=React.createClass({
道具类型：{
当前项：React.PropTypes.number.isRequired
},
componentWillMount:function（）{
metrics.currentItem=0；
metrics.nextItem=2；
},
handleClick:功能（ctx）{
metrics.currentItem++；
metrics.nextItem++；
var data=this.props.data.slice（metrics.currentItem、metrics.nextItem）；
数据[0]。idx=metrics.currentItem
数据[1]。idx=metrics.nextItem-1；
控制台日志（ctx）；
ctx.props.data=数据；
ctx.props.idx=metrics.currentItem；
//这个.forceUpdate（）；
},
render:function（）{
返回(
)   
}
});

这是我将更新的道具传递给的类

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;

var StoryItems=React.createClass({
组件将接收道具：函数（下一步）{
console.log（nextrops）；
},
组件安装：功能（a）{
log（'StoryItems:componentWillMount'，a）；
},
组件安装：功能（a）{
log（'StoryItems:componentDidMount'，a）；
},
shouldComponentUpdate:函数（下一步）{
log（'StoryItems:shouldComponentUpdate'，nextrops）；
返回true；
},
render:function（）{
返回(
);
},
handleItemUnmount:函数（ctx）{
//console.log（'here'，ctx）；
this.props.onChange（this）；
},
});
module.exports=故事项；

---

有人能发现什么不对劲吗？在这里反应n00b

当调用

StoryContainer.handleClick

时，不会执行任何操作来告诉React您需要重新渲染

StoryContainer

，这将向

StoryItems

发送新的道具。您正在修改React不知道的

度量

变量，因此React不知道重新渲染任何内容

---

您应该在

StoryContainer

组件上将

metrics

变量保留为

state

，然后使用

setState

更新该变量。调用

StoryContainer

上的

setState

将告诉React重新渲染它（因为它的状态已更改），并且当调用

StoryContainer.handleClick

时，它将向

StoryContainer
传递新的道具，这就是将新道具发送到
StoryItems
的原因。您正在修改React不知道的
度量
变量，因此React不知道重新渲染任何内容

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