Question

我有两个共享布局的基本组件。第一个是条目列表。当用户点击“编辑”时，他将进入详细信息页面。

问题是详情页面显示的是“列表”页面中的第一条记录，而不是用户点击的记录。

我做了一些测试，看起来问题是在ComponentWIllUnmount（）运行之前正在加载和装载详细信息页面，因此来自该上一页的订阅仍处于活动状态几毫秒。如果我直接访问详细信息页面或重新加载它，它可以正常工作，因为它没有从上一页获取任何数据。

这是我的代码：

List.jsx

export default class List extends TrackerReact( React.Component ) {

    constructor( props ) {

        super( props );

        var subscription = this.getSubscription();

        this.state = {

            ready: subscription.ready(),
            subscription: subscription,

        }

    }

    componentWillUnmount() {

        this.state.subscription.stop();

    }

    render() {
        return(
        //stuff...
        )
    }

}

Detail.jsx

export default class SkinDetail extends TrackerReact( React.Component ) {

    constructor( props ) {

        super( props );

        const subscription = Meteor.subscribe( 'skins.one', this.props.skin );

        var record = Records.findOne();

        if( record ) {

            this.state = {

                subscription: subscription,
                // Stuff...

            }

        }

    }

    getRecord() {

        return Records.findOne();

    }

    render() {

        var record = this.getRecord(); 

        return(
            // Do stuff with record...
        )

    }
}

我正在使用FlowRouter SSR作为链接和路由。

Answer 1

您应该明确找到您的记录，不要依赖从服务器发送的数据。

例如，如果需求发生变化，并且您需要在显示其他记录的详细信息页面上添加其他组件，则仅使用Records.findOne将无法为您提供所需的记录。

相反，您应该向_id提供查询.find以获取记录。您可以使用FlowRouter定义路线以存储_id值：FlowRouter.route('/details/:_id, {...})

组件在先前组件卸载之前安装（并保留订阅）

1 个答案: