Компонент, не обновляющий обновление реквизита

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, ничего не делается, чтобы сообщить Реагировать, что вам нужно переделать StoryContainer, что и отправляет новые реквизиты на StoryItems. Вы мутируете переменную metrics, о которой React не знает, поэтому React не будет знать, чтобы повторно визуализировать что-либо.

Вы должны сохранить переменную metrics как state на компоненте StoryContainer, а затем обновить ее с помощью setState. Призыв к setState на StoryContainer будет сообщать React о его повторном рендеринге (поскольку его состояние изменилось), и это передаст новые реквизиты StoryItems.