组件不更新道具更新

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} />
        )   
    }
});

这是我要将更新后的道具传递给的 class。

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 不知道要重新渲染任何东西。

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

组件不更新道具更新

Component not updating on props update

javascript

reactjs

react-native