Warning: file_get_contents(/data/phpspider/zhask/data//catemap/8/meteor/3.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript React JS组件在Meteor中多次渲染_Javascript_Meteor_Reactjs_Es5 Shim - Fatal编程技术网

Javascript React JS组件在Meteor中多次渲染

Javascript React JS组件在Meteor中多次渲染,javascript,meteor,reactjs,es5-shim,Javascript,Meteor,Reactjs,Es5 Shim,我将Meteor 1.3与react js和Tracker react一起用于此应用程序。 我有一个页面可以查看应用程序中的所有可用用户。此页面要求用户登录以查看数据。如果用户未登录,它将显示登录表单,一旦登录,组件将呈现用户的数据 逻辑的主要组件 export default class MainLayout extends TrackerReact(React.Component) { isLogin() { return Meteor.userId() ?

我将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>
          )
        }
    }
}
问题是登录时,它只显示当前用户的数据。不会渲染所有其他用户对象。如果我检查控制台,
console.log('User objects'+this.allusers())显示渲染3次的对象:第一次渲染仅显示当前用户的数据,第二次渲染所有用户的数据(所需结果),第三次渲染再次仅渲染当前用户的数据

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


知道为什么吗?

React在运行时多次调用组件的
render()
方法。如果遇到意外调用,通常情况下会触发对组件的更改并启动重新渲染。似乎有什么东西正在覆盖对Meteor.users.find().fetch()
的调用,这可能是因为您在每次渲染时都调用了该函数。尝试在render方法之外检查值,或者更好的是,依靠测试来确保您的组件正在执行它应该执行的操作:)

render()函数应该是纯函数,这意味着它不会修改组件状态,每次调用它时都返回相同的结果,并且不会读取或写入DOM,也不会与浏览器交互(例如,通过使用setTimeout)。如果需要与浏览器交互,请使用componentDidMount()或其他生命周期方法执行工作。保持render()的纯属性可以使服务器渲染更加实用,并使组件更易于思考

另见:


我不明白如何在渲染方法之外检查值。我当前的解决方案是在用户成功登录后重新加载页面。它不是完美的,但这是我目前唯一能想到的。您可以轻松地在自定义方法或任何一种生命周期方法中检查数据(尽管并非所有方法都能满足您的需要)。最好的方法是通过React devtools->I有一个非常类似的问题,我们都遵循TrackerReact示例中的代码模式(即,在类中定义一个从订阅的集合返回数据的方法,然后在render方法中定义.map)。我知道你已经接受了下面的答案,但它似乎并没有解决问题,只是告诉你用其他方法来解决它-这与TrackerReact在自己的演示中显示的代码模式背道而驰?!
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>
                
            )
    }   
};