javascript - 组件不更新 Prop 更新

Question

我正在尝试根据其父项对 Prop 的更新重新渲染一个组件。但是除非我使用 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} />
        )   
    }
});

这是我要将更新的 Prop 传递给的类(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;

有人能发现问题吗？在这里 react n00b。

Answer 1

当 StoryContainer.handleClick 被调用时，没有做任何事情来告诉 React 您需要重新渲染 StoryContainer，这是将新 Prop 发送到 StoryItems 的原因。你正在改变 React 不知道的 metrics 变量，所以 React 不知道要重新渲染任何东西。

您应该在 StoryContainer 组件上将 metrics 变量保持为 state，然后使用 setState 更新它.在 StoryContainer 上调用 setState 将告诉 React 重新渲染它(因为它的状态已经改变)并且将新的 Prop 传递给 StoryItems .