Question

我将Meteor 1.3与react js和Tracker React一起用于此应用程序。我有一个页面来查看应用程序中的所有可用用户。此页面要求用户登录以查看数据。如果用户未登录，它将显示登录表单，登录后该组件将呈现用户的数据。

逻辑的主要组成部分。

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

    isLogin() {
        return Meteor.userId() ? true : false
    }
    render() {

        if(!this.isLogin()){
            return (<Login />)
        }else{
        return (
            <div className="container">
                <AllUserdata  />            
            </div>
          )
        }
    }
}

在AllUserdata组件中：

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

    constructor() {
        super();

        this.state ={
            subscription: {
                Allusers : Meteor.subscribe("AllUsers")
            }
        }

    }

    componentWillUnmount(){
        this.state.subscription.Allusers.stop();
    }

    allusers() {
        return Meteor.users.find().fetch();
    }

    render() {
        console.log('User objects ' + this.allusers());
        return (
                <div className="row">
                    {
                    this.allusers().map( (user, index)=> {
                            return <UserSinlge key={user._id} user={user} index={index + 1}/>
                            })
                     }


                </div>

            )
    }   
};

问题是登录时，它只显示当前用户的数据。不呈现所有其他用户对象。如果我检查控制台，console.log('User objects ' + this.allusers());显示正在渲染3次的对象：第一个渲染仅显示当前用户的数据，第二个渲染呈现所有用户的数据（所需结果），第三个渲染仅再渲染当前用户的数据。

如果我刷新页面，将正确呈现用户数据。

知道为什么吗？

Answer 1

React在运行时多次调用组件的render()方法。如果您遇到意外的呼叫，通常会出现某些事情触发组件更改并启动重新渲染的情况。似乎有些东西可能会覆盖对Meteor.users.find().fetch()的调用，这可能是因为你在每个渲染上调用该函数。尝试检查render方法的值 outside ，或者更好的是，依靠测试来确保你的组件正在做它应该做的事情:)

来自https://facebook.github.io/react/docs/component-specs.html#render

render（）函数应该是纯的，这意味着它不会修改组件状态，每次调用它都会返回相同的结果，并且它不会读取或写入DOM或以其他方式与浏览器交互（例如，通过使用setTimeout）。如果需要与浏览器进行交互，请在componentDidMount（）或其他生命周期方法中执行您的工作。保持render（）纯度使服务器呈现更加实用，使组件更容易思考。

另见：

React JS组件在Meteor中多次渲染

1 个答案: