组件不更新道具更新

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。你正在改变React不知道的metrics变量，所以React不会知道重新渲染任何东西。

您应该在组件上保留metrics变量state，然后用setState更新该组件。在StoryContainer上setState的电话会告诉React重新渲染它（因为它的状态已经改变）并且会通过新的道具到StoryItems。